使用ajax异步提交表单的几种方法总结

 更新时间:2016年12月05日 10:18:11   投稿:jingxian  
下面小编就为大家带来一篇使用ajax异步提交表单的几种方法总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

这里介绍三种常用的提交方式

方式一

手工收集所有的用户输入,封装为大的“k1=v1&k2=v2…”键值对形式,使用$.post(url, data,fn)把数据提交给服务器

$.ajax({ 
    type:'post',   
    url:'Notice_noTipsNotice', 
    data:'k1=v1&k2=v2...', 
    cache:false, 
    dataType:'json', 
    success:function(data){ 
    } 
  }); 

方式二

单序列化:$('#myform').serialize( ); 其返回值就是“k1=v1&k2=v2...”键值对形式,再发起异步请求即可。

function noTips(){ 
  var formParam = $("#form1").serialize();//序列化表格内容为字符串 
  $.ajax({ 
    type:'post',   
    url:'Notice_noTipsNotice', 
    data:formParam, 
    cache:false, 
    dataType:'json', 
    success:function(data){ 
    } 
  }); 
} 

方式三

使用jQuery Form插件提供的ajaxSubmit()函数

$('#myform').ajaxSubmit({
type: 'GET/POST',
url: 'xx.php',
dataType: 'json',
success: fn,
clearForm: true,
resetForm: true
}); 
//此函数会自动把选定的表单进行序列化并异步提交

以上这篇使用ajax异步提交表单的几种方法总结就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • ajax+springmvc实现C与View之间的数据交流方法

    ajax+springmvc实现C与View之间的数据交流方法

    下面小编就为大家带来一篇ajax+springmvc实现C与View之间的数据交流方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • Ajax使用杂谈 也许也是乱弹

    Ajax使用杂谈 也许也是乱弹

    Google Suggest 和Google Map的出现,引起了我们Web开发者的一次震动。
    2010-05-05
  • Ajax方式提交带文件上传的表单及隐藏iframe应用

    Ajax方式提交带文件上传的表单及隐藏iframe应用

    一般的表单都是通过ajax方式提交,所以碰到带文件上传的表单就比较麻烦,基本原理就是在页面增加一个隐藏iframe,然后通过ajax提交除文件之外的表单数据,感兴趣的你不妨了解一下,或许本文对你有所帮助
    2013-01-01
  • 关于Ajax跨域问题及解决方案详析

    关于Ajax跨域问题及解决方案详析

    这篇文章主要给大家介绍了Ajax跨域问题以及解决方案的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Ajax具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • asp+Ajax简单客户登陆验证

    asp+Ajax简单客户登陆验证

    asp+Ajax简单客户登陆验证...
    2007-03-03
  • AJAX应用之注册用户即时检测

    AJAX应用之注册用户即时检测

    AJAX应用之注册用户即时检测...
    2006-07-07
  • Ajax验证用户的唯一性

    Ajax验证用户的唯一性

    这篇文章主要介绍了Ajax验证用户的唯一性,验证环境Ajax+Jquery+Json+struts2,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • jquery中的ajax同步和异步详解

    jquery中的ajax同步和异步详解

    jquery ajax同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载,页面出现了假死状态,当这个ajax执行完毕后才会继续运行其他的代码假死状态解除。而异步的意思是这个ajax代码运行中的时候其他代码一样可以运行。本文给大家详解,感兴趣的朋友参考下
    2015-09-09
  • Ajax读取XML实现动态下拉导航

    Ajax读取XML实现动态下拉导航

    Ajax读取XML实现动态下拉导航...
    2007-02-02
  • Ajax上传图片及上传前先预览功能实例代码

    Ajax上传图片及上传前先预览功能实例代码

    在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果,下面通过本文给大家分享解决Ajax上传图片及上传前先预览功能,感兴趣的朋友参考下吧
    2017-08-08

最新评论