详解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 相关文章推荐
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
jquery无法设置checkbox选中即没有变成选中状态
Mar 27 Javascript
javascript如何判断输入的url是否正确
Apr 11 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 Javascript
jQuery实现图片上传和裁剪插件Croppie
Nov 29 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
node.js中实现kindEditor图片上传功能的方法教程
Apr 26 Javascript
想用好React的你必须要知道的一些事情
Jul 24 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 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 向访客和爬虫显示不同的内容
2009/11/09 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
JavaScript 盒模型 尺寸深入理解
2012/12/31 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
javascript闭包入门示例
2014/04/30 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
JS PHP字符串截取函数实现原理解析
2020/08/29 Javascript
vue print.js打印支持Echarts图表操作
2020/11/13 Javascript
使用Python进行新浪微博的mid和url互相转换实例(10进制和62进制互算)
2014/04/25 Python
Python3实现从文件中读取指定行的方法
2015/05/22 Python
python用模块zlib压缩与解压字符串和文件的方法
2016/12/16 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
使用Python & Flask 实现RESTful Web API的实例
2017/09/19 Python
Python执行时间的几种计算方法
2020/07/31 Python
PyCharm Community安装与配置的详细教程
2020/11/24 Python
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
一份比较全的PHP面试题
2016/07/29 面试题
历史专业个人求职信范文
2013/12/07 职场文书
幼儿园新年寄语
2014/04/03 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
物业品质提升方案
2014/06/08 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js
Python 统计序列中元素的出现频度
2022/04/26 Python