form表单提交和ajax表单提交,关于移动端如何通过软键盘上的【搜索】和【前进】进行提交操作
2016-12-07 16:30
561 查看
【文章来源】由于自己对于form研究甚少,所以一直用的都是AJAX进行提交,这次后台提出要用form提交,顺便深入研究一下;之前在做表单的时候,发现input可以通过设置不同的type属性,调用不同的移动端软键盘,但是对于软键盘中的【搜索】和【前往】不知道怎么进行控制
【form 和 ajax 区别】
Ajax提交是通过js来提交请求,请求与响应均由js引擎来处理,页面不会刷新,用户感觉不到实际上浏览器发出了请求。如我们想要改变页面局部内容的时候,使用Ajax进行刷新不会引起整体页面重新加载的现象,交互良好
使用AJAX,用户对Web的体验会更“敏捷”:数据提交页面不会闪屏;页面局部更新速度快;网络带宽占用低。
AJAX开发相较传统模式的简单之处:传统模式下,表单提交则整个页面重绘,为了维持页面用户对表单的状态改变,要多些不少代码。 要在控制器和模板之间传递更多参数以保持页面状态。而AJAX不然,因为页面只是局部更新, 不关心也不会影响页面其他部分的内容。
AJAX开发相较传统模式的难度:需要了解、精通JavaScript,而JavaScript存在调试麻烦、浏览器兼容性等很多障碍。不过这方面目前来看早已不是什么难点了
【关于调用软键盘问题】
目前经过测试使用传统的form提交,软键盘可以进行调用,功能和直接点击提交时一样的。值得注意的是,点击软键盘可以进行提交表单操作,但对于表单中提交按钮本身不会进行触发,也就是点击软键盘【搜索】或【前往】不会触发【提交按钮】点击事件
Ajax目前还没有找到如何调用软键盘的方法
【input属性type2016年12月7日亲自测试总结】
属性为 == email ==,调用邮件软键盘
属性为 == url ==,调用网址软键盘
属性为 == search ==,调用带有【搜索】按钮的软键盘
属性为 == tel ==,调用全数字键盘
属性为 == number ==,调用带有拼音的数字软键盘
总结:这部分属于笔记记录方便我个人即使查看
【form 和 ajax 区别】
Ajax提交是通过js来提交请求,请求与响应均由js引擎来处理,页面不会刷新,用户感觉不到实际上浏览器发出了请求。如我们想要改变页面局部内容的时候,使用Ajax进行刷新不会引起整体页面重新加载的现象,交互良好
使用AJAX,用户对Web的体验会更“敏捷”:数据提交页面不会闪屏;页面局部更新速度快;网络带宽占用低。
AJAX开发相较传统模式的简单之处:传统模式下,表单提交则整个页面重绘,为了维持页面用户对表单的状态改变,要多些不少代码。 要在控制器和模板之间传递更多参数以保持页面状态。而AJAX不然,因为页面只是局部更新, 不关心也不会影响页面其他部分的内容。
AJAX开发相较传统模式的难度:需要了解、精通JavaScript,而JavaScript存在调试麻烦、浏览器兼容性等很多障碍。不过这方面目前来看早已不是什么难点了
【1】Ajax在提交、请求、接收时,都是异步进行的,网页不需要刷新; Form提交则是新建一个页面,哪怕是提交给自己本身的页面,也是需要刷新的; 【2】Ajax在提交时,是在后台新建一个请求; Form却是放弃本页面,而后再请求; 【3】Ajax必须要使用JS来实现,不启用JS的浏览器,无法完成该操作; Form却是浏览器的本能,无论是否开启JS,都可以提交表单; 【4】Ajax在提交、请求、接收时,整个过程都需要使用程序来对其数据进行处理; Form提交时,却是根据你的表单结构自动完成,不需要代码干预;
【关于调用软键盘问题】
目前经过测试使用传统的form提交,软键盘可以进行调用,功能和直接点击提交时一样的。值得注意的是,点击软键盘可以进行提交表单操作,但对于表单中提交按钮本身不会进行触发,也就是点击软键盘【搜索】或【前往】不会触发【提交按钮】点击事件
Ajax目前还没有找到如何调用软键盘的方法
【input属性type2016年12月7日亲自测试总结】
属性为 == email ==,调用邮件软键盘
属性为 == url ==,调用网址软键盘
属性为 == search ==,调用带有【搜索】按钮的软键盘
属性为 == tel ==,调用全数字键盘
属性为 == number ==,调用带有拼音的数字软键盘
总结:这部分属于笔记记录方便我个人即使查看
相关文章推荐
- 关于Jquery 获取表单FORM所有元素进行AJAX提交
- 关于移动端,如何方便、快捷,愉快的点击软键盘进行数据处理、搜索等
- 通过Ajax方式提交form表单上传文件,使用FormData进行Ajax请求
- 基于jQuery通过jQuery.form.js插件使用ajax提交form表单
- Jquery通过Ajax方式来提交Form表单的具体实现
- 基于jQuery通过jQuery.form.js插件使用ajax提交form表单
- jQuery通过jquery.form.js插件使用AJAX提交Form表单
- Jquery通过Ajax方式提交Form表单
- form表单以ajax提交,并且对提交的参数进行自定义
- 如何通过javascript提交表单form
- form表单提交前通过jq验证(ajax特别说明,return true失效)
- 通过ajax提交form表单
- ajax(或者jquery)如何提交整个form表单
- Extjs6关于Ajax和form表单提交以及store请求session超时的处理方法
- 通过ajax提交form表单
- 关于jquery的ajax提交form表单的域模型问题
- Jquery通过Ajax方式来提交Form表单的具体实现
- liferay中使用jQuery Validation Engine进行ajax验证,不通过也提交表单的解决方案
- 将form表单通过ajax实现无刷新提交的简单实例
- 关于form表单提交与ajax提交的区别