详解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 相关文章推荐
javaScript使用EL表达式的几种方式
May 27 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
js获取浏览器的各种属性
Apr 27 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
JS使用new操作符创建对象的方法分析
May 30 Javascript
通过实例了解JS 连续赋值
Sep 24 Javascript
javascript实现前端成语点击验证
Jun 24 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
PHP中的串行化变量和序列化对象
2006/09/05 PHP
php查看请求头信息获取远程图片大小的方法分享
2013/12/25 PHP
destoon文章模块调用企业会员资料的方法
2014/08/22 PHP
php简单统计中文个数的方法
2016/09/30 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
基于jquery实现的自动补全功能
2015/03/12 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
js格式化输入框内金额、银行卡号
2016/02/01 Javascript
微信小程序 生命周期详解
2016/10/12 Javascript
Bootstrap CSS组件之按钮组(btn-group)
2016/12/17 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
[01:57]2018DOTA2亚洲邀请赛赛前采访-iG
2018/04/03 DOTA
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
手把手教你使用Python创建微信机器人
2019/04/29 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
解决Keras中Embedding层masking与Concatenate层不可调和的问题
2020/06/18 Python
详解python爬取弹幕与数据分析
2020/11/14 Python
Python 按比例获取样本数据或执行任务的实现代码
2020/12/03 Python
python工具快速为音视频自动生成字幕(使用说明)
2021/01/27 Python
高中毕业自我鉴定
2013/12/19 职场文书
医学院校毕业生自荐信范文
2014/01/01 职场文书
满月酒答谢词
2014/01/14 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
2015年五一劳动节慰问信
2015/03/23 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
Python移位密码、仿射变换解密实例代码
2021/06/27 Python
5个实用的JavaScript新特性
2022/06/16 Javascript
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技