详解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学习指南
Dec 01 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
jQuery中removeClass()方法用法实例
Jan 05 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
jQuery实现360°全景拖动展示
Mar 18 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
vue登录路由验证的实现
Dec 13 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 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读取xml方法介绍
2013/01/12 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
2013/11/13 PHP
destoon之一键登录设置
2014/06/21 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
jquery聚焦文本框与扩展文本框聚焦方法
2012/10/12 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
JS刷新父窗口的几种方式小结(推荐)
2016/11/09 Javascript
分享十三个最佳JavaScript数据网格库
2017/04/07 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
python实现websocket的客户端压力测试
2019/06/25 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
Python动态导入模块:__import__、importlib、动态导入的使用场景实例分析
2020/03/30 Python
python3排序的实例方法
2020/10/20 Python
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
小学教师培训感言
2014/02/11 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
2014年乡镇领导个人整改措施
2014/09/19 职场文书
物业管理委托协议(2篇)
2014/09/23 职场文书
创先争优宣传标语
2014/10/08 职场文书
房屋出售授权委托书
2014/10/12 职场文书
合同审查法律意见书
2015/06/04 职场文书
Filebeat 采集 Nginx 日志的方法
2021/03/31 Servers
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
python简单验证码识别的实现过程
2021/06/20 Python