详解jquery中$.ajax方法提交表单


Posted in Javascript onNovember 03, 2014
function postdata(){                        //提交数据函数   

    $.ajax({                                //调用jquery的ajax方法   

        type: "POST",                       //设置ajax方法提交数据的形式   

        url: "ok.php",                      //把数据提交到ok.php   

        data: "writer="+$("#writer").val(), //输入框writer中的值作为提交的数据   

        success: function(msg){             //提交成功后的回调,msg变量是ok.php输出的内容。   

            alert("数据提交成功");            //如果有必要,可以把msg变量的值显示到某个DIV元素中   

        }   

    });   

} 

jquery手册描述:
data 发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。
示例:

$.ajax({   

    type: "POST",   

    url: "some.php",   

    data: "name=John&location=Boston",   

    success: function(msg){   

        alert( "Data Saved: " + msg );   

    }   

}); 

这里data后面跟的参数可以用二种表式:一种是普通url传参的写法一样,还有一种就是写在json数组里,
上面示例data部分也可以这样写:data: {name:"John",location:"Boston"}。这二个用法有什么区别?

今天在开发中发现二者用法的细微差别。第一种我们用url传参,参数里面如果加带"&"这个符号的话,可能参数接收不到或不完整,如“ data: "name=John&location=Boston",”,

如果name的值是"john&smith"这样写可能就会有问题,我们可以用JS里面的encodeURIComponent()方法进行转义,

但如果用data: {name:"John",location:"Boston"}这种方式写的话就不需要进行转义,如果转义的话,接收的将是转义后的字符串

Javascript 相关文章推荐
jscript之List Excel Color Values
Jun 13 Javascript
jQuery getJSON 处理json数据的代码
Jul 26 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
js replace 与replaceall实例用法详解
Aug 03 Javascript
jQuery实现图片文字淡入淡出效果
Dec 21 Javascript
AngularJS中的Directive自定义一个表格
Jan 25 Javascript
浅谈javascript的call()、apply()、bind()的用法
Feb 21 Javascript
限制复选框最多选择项的实现代码
May 30 Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 Javascript
利用JS动态生成隔行换色HTML表格的两种方法
Oct 09 Javascript
VUE实现密码验证与提示功能
Oct 18 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
jquery处理json对象
Nov 03 #Javascript
js格式化时间小结
Nov 03 #Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 #Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 #Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 #Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
Nov 02 #Javascript
加载列表时jquery获取ul中第一个li的属性
Nov 02 #Javascript
You might like
附件名前加网站名
2008/03/23 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
JS 两个字符串时间的天数差计算
2013/08/25 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
jQuery中选择器小问题(新人难免遇到)
2014/03/31 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
在Python函数中输入任意数量参数的实例
2019/07/16 Python
python3实现往mysql中插入datetime类型的数据
2020/03/02 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
.NET面试问题集
2015/12/08 面试题
求职简历的自我评价
2014/01/31 职场文书
公证委托书大全
2014/04/04 职场文书
幼儿老师求职信
2014/06/30 职场文书
老干部工作先进事迹
2014/08/17 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
2015年教学工作总结
2015/04/02 职场文书
结婚典礼主持词
2015/06/29 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫