jQuery中get和post方法传值测试及注意事项


Posted in Javascript onAugust 08, 2014

用 jQuery 的都知道,jQuery 的 get 和 post 方法有三个参数:地址,数据 和回调函数,但我们知道地址也可以跟随数据的(形如:get_data.php?v1=1&v2=2),而且第二个参数可以省略,即第二个参数可 以直接写回调函数,那么数据写在地址后面和写在 data 参数里有什么区别呢?
刚刚做了几个实验,看看下面的代码就清楚了:
以下内容需要回复才能看到

jquery_data.php

echo "post: ";
print_r($_POST);
echo "get: ";
print_r($_GET);
?>

jquery_test.html

实验1:

$(function() {
// post 方法,两处都有数据
$.post('jquery_data.php?v1=1', {v2: 2}, function(data) {
$('
').append(data).appendTo('body');
});
});

返回结果:

post: Array
(
[v2] => 2
)
get: Array
(
[v1] => 1
)

实验2:

$(function()
{
// post 方法,数据在地址后面, 第二个参数为回调函数
$.post('jquery_data.php?v1=1', function(data)
{
$('<pre/>').append(data).appendTo('body');
});
});

返回结果,数据在 get 中:

post: Array
(
)
get: Array
(
[v1] => 1
)

实验3:

$(function()
{
// get 方法,用 data 参数传值
$.get('jquery_data.php', {v2: 2}, function(data)
{
$('<pre/>').append(data).appendTo('body');
});
});

返回结果,数据在 get 中:

post: Array
(
)
get: Array
(
[v2] => 2
)

实验4:

$(function()
{
// get 方法,两处都有数据
$.get('jquery_data.php?v1=1', {v2: 2}, function(data)
{
$('<pre/>').append(data).appendTo('body');
});
});

返回结果,两处数据被合并了,都在 get 中:

post: Array
(
)
get: Array
(
[v1] => 1
[v2] => 2
)

实验5:

$(function()
{
// get 方法,两处都有数据,且变量名相同
$.get('jquery_data.php?v2=1', {v2: 2}, function(data)
{
$('<pre/>').append(data).appendTo('body');
});
});

返回结果,数据在 get 中,且 data 参数中的数据覆盖了地址后面的数据:

post: Array
(
)
get: Array
(
[v2] => 2
)

通过这几个简单的小例子不难看出,地址后面的数据永远是以 get 形式传递的,无论使用的是 get 方法还是 post 方法;而 data 参数中的数据是根据方法决定传递方式的。

因此,为了避免混淆,建议大家尽量不要把数据写在地址后面,而是统一放在 data 参数中。

当然,如果你想在用 post 方法时,同时利用 get 传值,那么就可以把要以 get 方式传递的数据写在地址后面,把要以 post 方式传递的数据写在 data 参数中。

总之方法是死的,人是活的,怎么用还要看实际情况。子曾经曰过:实践是检验真理的唯一标准。没事做做实验,掌握知识更牢固。

Javascript 相关文章推荐
JavaScript 创建运动框架的实现代码
May 08 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
Dec 14 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
Bootstrap CSS组件之下拉菜单(dropdown)
Dec 17 Javascript
angularjs实现下拉列表的选中事件示例
Mar 03 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
JS二级菜单不同实现方法分析【4种方法】
Dec 21 Javascript
浅析Vue下的components模板使用及应用
Nov 27 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
Aug 08 #Javascript
js事件监听机制(事件捕获)总结
Aug 08 #Javascript
使用jquery.qrcode生成彩色二维码实例
Aug 08 #Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
Aug 08 #Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 #Javascript
JS创建类和对象的两种不同方式
Aug 08 #Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 #Javascript
You might like
第4章 数据处理-php字符串的处理-郑阿奇(续)
2011/07/04 PHP
PHP 防注入函数(格式化数据)
2011/08/08 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
再谈ie和firefox下的document.all属性
2009/10/21 Javascript
使用jQuery插件创建常规模态窗口登陆效果
2013/08/23 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
jQuery选择器全集详解
2014/11/24 Javascript
jQuery回调函数的定义及用法实例
2014/12/23 Javascript
在Javascript中处理字符串之big()方法的使用
2015/06/08 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
jQuery实现三级菜单的代码
2016/05/09 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
2016/09/04 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
2017/06/29 jQuery
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
Bootstrap实现下拉菜单多级联动
2017/11/23 Javascript
快速解决vue在ios端下点击响应延时的问题
2018/08/27 Javascript
Javascript 之封装(Package)
2018/09/14 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
vue element实现表格合并行数据
2020/11/30 Vue.js
python中关于日期时间处理的问答集锦
2013/03/08 Python
python中sys.argv函数精简概括
2018/07/08 Python
详解基于django实现的webssh简单例子
2018/07/17 Python
Python实现登陆文件验证方法
2018/10/06 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
Pycharm的Available Packages为空的解决方法
2020/09/18 Python
物流管理专业毕业生自荐信
2014/03/04 职场文书
电子商务专业求职信
2014/07/10 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
win10+anaconda安装yolov5的方法及问题解决方案
2021/04/29 Python
django学习之ajax post传参的2种格式实例
2021/05/14 Python
Python 语言实现六大查找算法
2021/06/30 Python
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android
python程序的组织结构详解
2021/12/06 Python