form表单提交和ajax表单提交,关于移动端如何通过软键盘上的【搜索】和【前进】进行提交操作

【文章来源】由于自己对于form研究甚少,所以一直用的都是AJAX进行提交,这次后台提出要用form提交,顺便深入研究一下;之前在做表单的时候,发现input可以通过设置不同的type属性,调用不同的移动端软键盘,但是对于软键盘中的【搜索】和【前往】不知道怎么进行控制

【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 ==,调用带有拼音的数字软键盘

总结:这部分属于笔记记录方便我个人即使查看

posted @ 2016-12-07 16:30  怪诞咖啡  阅读(2826)  评论(2编辑  收藏  举报