详解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 相关文章推荐
分享27个jQuery 表单插件集合推荐
Apr 25 Javascript
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
javascript判断office版本示例
Apr 11 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
vue 获取视频时长的实例代码
Aug 20 Javascript
在vue中使用回调函数,this调用无效的解决
Aug 11 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 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
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
php下目前为目最全的CURL中文说明
2010/08/01 PHP
求PHP数组最大值,最小值的代码
2011/10/31 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
laravel 自定义常量的两种方案
2019/10/14 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
JS+HTML5实现上传图片预览效果完整实例【测试可用】
2017/04/20 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
vue 项目build错误异常的解决方法
2019/04/22 Javascript
Vue项目中使用jquery的简单方法
2019/05/16 jQuery
通过实例讲解JS如何防抖动
2019/06/15 Javascript
python获取android设备的GPS信息脚本分享
2015/03/06 Python
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
python使用KNN算法手写体识别
2018/02/01 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
Python 读写文件的操作代码
2018/09/20 Python
Python Pandas 箱线图的实现
2019/07/23 Python
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
简单说说tomcat的配置
2013/05/28 面试题
一道输出判断型Java面试题
2014/10/01 面试题
需求分析说明书
2014/05/09 职场文书
尊师重教演讲稿
2014/09/04 职场文书
2014年作风建设剖析材料
2014/10/23 职场文书
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android