详解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里的条件判断
Feb 27 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
Sep 05 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
基于JS实现网页中的选项卡(两种方法)
Jun 16 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
基于axios 解决跨域cookie丢失的问题
Sep 26 Javascript
vue中使用protobuf的过程记录
Oct 26 Javascript
file-loader打包图片文件时路径错误输出为[object-module]的解决方法
Jan 03 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新手上路(十一)
2006/10/09 PHP
php无限分类且支持输出树状图的详细介绍
2013/06/19 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
javascript hashtable实现代码
2009/10/13 Javascript
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
输入法的回车与消息发送快捷键回车的冲突解决方法
2016/08/09 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
2018/03/13 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
2018/08/09 jQuery
angular5 子组件监听父组件传入值的变化方法
2018/09/30 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
JavaScript直接调用函数与call调用的区别实例分析
2020/05/22 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
python中rc1什么意思
2020/06/19 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
2012/12/07 HTML / CSS
新闻记者实习自我鉴定
2013/09/19 职场文书
车间班组长岗位职责
2013/11/13 职场文书
医药营销个人求职信
2014/04/12 职场文书
2014年信息宣传工作总结
2014/12/18 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
详解RedisTemplate下Redis分布式锁引发的系列问题
2021/04/27 Redis
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers