详解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 03 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
Vue中计算属性computed的示例解读
Jul 26 Javascript
响应式框架Bootstrap栅格系统的实例
Dec 19 Javascript
React router动态加载组件之适配器模式的应用详解
Sep 12 Javascript
浅谈bootstrap layer.open中end的使用方法
Sep 12 Javascript
微信小程序实现分享商品海报功能
Sep 30 Javascript
countUp.js实现数字滚动效果
Oct 18 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
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
php读取csv文件并输出的方法
2015/03/14 PHP
smarty模板引擎之分配数据类型
2015/03/30 PHP
PHP中FTP相关函数小结
2016/07/15 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
实例讲解JS中数组Array的操作方法
2014/05/09 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
总结Node.js中的一些错误类型
2016/08/15 Javascript
针对JavaScript中this指向的简单理解
2016/08/26 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
vue中mint-ui环境搭建详细介绍
2017/04/06 Javascript
关于vue.js过渡css类名的理解(推荐)
2017/04/10 Javascript
详解Immutable及 React 中实践
2018/03/01 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
Python urlopen()函数 示例分享
2014/06/12 Python
用python读写excel的方法
2014/11/18 Python
python实现查询IP地址所在地
2015/03/29 Python
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
Python实现句子翻译功能
2017/11/14 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
django celery redis使用具体实践
2019/04/08 Python
用 Python 制作地球仪的方法
2020/04/24 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
学习十八届三中全会精神实施方案
2014/02/17 职场文书
小学生寒假家长评语
2014/04/16 职场文书
庆元旦演讲稿
2014/09/15 职场文书
小学安全教育主题班会
2015/08/12 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
Pytest中conftest.py的用法
2021/06/27 Python