详解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 相关文章推荐
代码精简的可以实现元素圆角的js函数
Jul 21 Javascript
jquery判断单个复选框是否被选中的代码
Sep 03 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
Sep 02 Javascript
JS实现灵巧的下拉导航效果代码
Aug 25 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
深入理解bootstrap框架之第二章整体架构
Oct 09 Javascript
Javascript动画效果(4)
Oct 11 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 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 5.0对象模型深度探索之类的静态成员
2008/03/27 PHP
收集的二十一个实用便利的PHP函数代码
2010/04/22 PHP
php session安全问题分析
2011/06/24 PHP
php中计算程序运行时间的类代码
2012/11/03 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
php抽象类用法实例分析
2015/07/07 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
纯JavaScript代码实现文本比较工具
2016/02/17 Javascript
JS动态给对象添加属性和值的实现方法
2016/10/21 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
Vue项目中Api的组织和返回数据处理的操作
2019/11/04 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
微信小程序实现吸顶效果
2020/01/08 Javascript
简单介绍Python中的round()方法
2015/05/15 Python
Python验证码识别的方法
2015/07/10 Python
Python操作MySQL数据库9个实用实例
2015/12/11 Python
Python使用win32com模块实现数据库表结构自动生成word表格的方法
2018/07/17 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
浅谈对python中if、elif、else的误解
2020/08/20 Python
python中@contextmanager实例用法
2021/02/07 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
工作检讨书怎么写
2014/10/10 职场文书
商务邀请函
2015/01/30 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
2015年防汛工作总结
2015/05/15 职场文书
用Python将库打包发布到pypi
2021/04/13 Python