详解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入门学习书籍推荐
Jun 12 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
JavaScript对Json的增删改属性详解
Jun 02 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
js选择器全面解析
Jun 27 Javascript
基于jQuery实现弹出可关闭遮罩提示框实例代码
Jul 18 Javascript
javascript实现消灭星星小游戏简单版
Nov 15 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
jquery分页插件pagination使用教程
Oct 23 jQuery
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
angular组件间通讯的实现方法示例
May 07 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中str_replace函数使用小结
2008/10/11 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
PHP高级对象构建 工厂模式的使用
2012/02/05 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
PHP以指定字段为索引返回数据库所取的数据数组
2013/06/30 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
JavaScript 模仿vbs中的 DateAdd() 函数的代码
2007/08/13 Javascript
javascript实现回到顶部特效
2015/05/06 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
2016/11/03 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
详解nodejs异步I/O和事件循环
2017/06/07 NodeJs
webpack4 + react 搭建多页面应用示例
2018/08/03 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
python 获取et和excel的版本号
2009/04/09 Python
python在控制台输出进度条的方法
2015/06/20 Python
Python基于Matplotlib库简单绘制折线图的方法示例
2017/08/14 Python
Python进阶之全面解读高级特性之切片
2019/02/19 Python
详解【python】str与json类型转换
2019/04/29 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
Python字典生成式、集合生成式、生成器用法实例分析
2020/01/07 Python
TensorFlow2.0矩阵与向量的加减乘实例
2020/02/07 Python
Java TransactionAPI (JTA) 主要包含几部分
2012/12/07 面试题
一套带答案的C++笔试题
2014/01/10 面试题
学习交流会主持词
2014/04/01 职场文书
岗位职责说明书模板
2014/07/30 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
2014年统战工作总结
2014/12/09 职场文书
师德师风学习材料
2014/12/19 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫