详解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 相关文章推荐
css图片自适应大小
Nov 28 Javascript
js 提交和设置表单的值
Dec 19 Javascript
验证javascript中Object和Function的关系的三段简单代码
Jun 27 Javascript
jQuery获取地址栏参数插件(模仿C#)
Oct 26 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
详解Python中logging日志模块在多进程环境下的使用
Dec 26 Javascript
JS实现仿UC浏览器前进后退效果的实例代码
Jul 17 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 Javascript
easyUI 实现的后台分页与前台显示功能示例
Jun 01 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函数 serialize()和unserialize()
2012/02/04 PHP
PHP解析RSS的方法
2015/03/05 PHP
PHP数组操作――获取数组最后一个值的方法
2015/04/14 PHP
图文介绍PHP添加Redis模块及连接
2015/07/28 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
javascript RadioButtonList获取选中值
2009/04/09 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
复制Input内容的js代码_支持所有浏览器,修正了Firefox3.5以上的问题
2010/06/21 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
原生js实现jquery函数animate()动画效果的简单实例
2016/08/21 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
python 函数内部修改外部变量的方法
2018/12/18 Python
python中字符串数组逆序排列方法总结
2019/06/23 Python
Python使用import导入本地脚本及导入模块的技巧总结
2019/08/07 Python
Python列表如何更新值
2020/05/27 Python
Matplotlib animation模块实现动态图
2021/02/25 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
.net软件工程师应聘上机试题
2015/03/10 面试题
音乐教学案例
2014/01/30 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
2015年电话销售工作总结范文
2015/04/20 职场文书
干部培训简讯
2015/07/20 职场文书
小学新课改心得体会
2016/01/22 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python