【文章来源】由于自己对于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 ==,调用带有拼音的数字软键盘

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

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

  1. 第一百八十六节,jQuery,验证表单插件,Ajax 表单插件,验证和提交表单

    jQuery,验证表单插件,Ajax 表单插件,验证和提交表单 HTML <form id="reg" method="post" action=&quo ...

  2. 表单在ios下输入框必须重压或长按才能唤起软键盘

    解决方案: 一.在node_module里找到fastClick文件,然后找到focus方法,加一句focus方法即可解决:FastClick.prototype.focus = function(t ...

  3. 使用ajax提交form表单,包括ajax文件上传

    前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },"json"); 又或者是这样的aja ...

  4. form表单和ajax表单提交(Html.BeginForm()、Ajax.BeginForm())的差别

    有如下几种区别: 1. Ajax在提交.请求.接收时,都是异步进行的,网页不需要刷新: Form提交则是新建一个页面,哪怕是提交给自己本身的页面,也是需要刷新的: 2. A在提交时,是在后台新建一个请 ...

  5. Ajax表单提交插件jquery form

    jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交. jQuery Form有两个核心方法ajax ...

  6. Form表单提交,Ajax请求,$http请求的区别

    做过前端同学想必都避免不了要和后台server打交道.而以下这三种与后台交互的方式想必大家都不陌生. Form表单提交,Ajax请求,Angular的$http请求 以前一直搞不清楚什么时候应该用哪种 ...

  7. 使用ajax提交form表单,包括ajax文件上传【转载】

    [使用ajax提交form表单,包括ajax文件上传] 前言 转载:作者:https://www.cnblogs.com/zhuxiaojie/p/4783939.html 使用ajax请求数据,很多 ...

  8. 使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html

    使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...

  9. jquery.form.js(ajax表单提交)

    Form插件地址: 官方网站:http://malsup.com/jQuery/form/ 翻译地址:http://www.aqee.net/docs/jquery.form.plugin/jquer ...

随机推荐

  1. iOS-技巧性总结

    1.AFN与ASI对比 -- AFN1. 基于 NSURLConnection & NSURLSession 进行的封装2. 使用简单3. 提供了自动的序列化 & 反序列化支持! AF ...

  2. <dependency>

      <dependency>             <groupId>org.hibernate</groupId>                       ...

  3. SpringAOP之动态代理

    一.动态代理: 1.在原有的静态代理的基础上进一步的完善,由于静态代理中,重复写了相同的代码使得代码的整体结构显得冗余,而且还不同的核心类还需要有不用的代理类,是写死了的具体的类.所以需要使用动态代理 ...

  4. js实现继承的方式总结

    js实现继承的5种方式 以下 均为 ES5 的写法: js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承 ...

  5. vue小总结

    以下是我在使用vue过程中自己对vue的一些小总结,希望对学习vue的亲们能有所帮助: 1.   http的post请求: this.$http({url: '/someUrl', method: ' ...

  6. Create Volume 操作(Part I) - 每天5分钟玩转 OpenStack(50)

    前面已经学习了 Cinder 的架构和相关组件,从本节我们开始详细分析 Cinder 的各种操作,首先讨论 Cinder 如何创建 volume. Create 操作流程如下: 客户(可以是 Open ...

  7. Android自定义View 画弧形,文字,并增加动画效果

    一个简单的Android自定义View的demo,画弧形,文字,开启一个多线程更新ui界面,在子线程更新ui是不允许的,但是View提供了方法,让我们来了解下吧. 1.封装一个抽象的View类   B ...

  8. 数据可视化-EChart2.0使用总结1

    图表是企业级Web开发必不可少的一个功能点.也是“数据可视化的一个具体呈现”.今天看到阮一峰翻译的“数据可视化:基本图表”一文,同时梳理一下公司现在项目使用的EChart2.0类库.阮一峰的文章同时也 ...

  9. 国内版Office 365和Azure AAD绑定的问题及解决方案

      背景: 1. 开发人员要做的事情,是希望在应用程序里面能调用Office 365 的API(Microsoft Graph)来动态添加Office 365账号 2. 如果需要调用这些API,必须在 ...

  10. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...