详解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 ready函数源代码研究
Dec 06 Javascript
jQuery 开发者应该注意的9个错误
May 03 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
Angular 4.x中表单Reactive Forms详解
Apr 25 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
JS遍历DOM文档树的方法实例详解
Apr 03 Javascript
webpack配置打包后图片路径出错的解决
Apr 26 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 Javascript
Vue中component标签解决项目组件化操作
Sep 04 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分页函数代码(简单实用型)
2010/12/02 PHP
Nigma vs Alliance BO5 第一场2.14
2021/03/10 DOTA
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
jquery实现叠层3D文字特效代码分享
2015/08/21 Javascript
WEB前端开发都应知道的jquery小技巧及jquery三个简写
2015/11/15 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
详解用vue.js和laravel实现微信支付
2017/06/23 Javascript
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
浅谈JavaScript中this的指向问题
2020/07/28 Javascript
Python中处理字符串的相关的len()方法的使用简介
2015/05/19 Python
Python制作简单的网页爬虫
2015/11/22 Python
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
python实现电脑自动关机
2018/06/20 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
numpy 矩阵形状调整:拉伸、变成一位数组的实例
2020/06/18 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
布里斯班女装时尚品牌:Adrift
2017/12/28 全球购物
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
先进工作者获奖感言
2014/02/08 职场文书
党支部换届选举方案
2014/05/08 职场文书
小学领导班子对照材料
2014/08/23 职场文书
幼儿园圣诞节活动总结
2015/05/06 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
基于tensorflow权重文件的解读
2021/05/26 Python