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

 更新时间:2014年08月08日 11:22:44   投稿:whsnow  
jQuery 的 get 和 post 方法有三个参数:地址,数据 和回调函数,刚刚做了几个实验,看看下面的代码就清楚了

用 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 参数中。

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

相关文章

  • JQUERY操作JSON实例代码

    JQUERY操作JSON实例代码

    通过这篇文章你可以得到以下收获JQUERY操作JSON的一些实现方法。
    2010-02-02
  • element form 校验数组每一项实例代码

    element form 校验数组每一项实例代码

    这篇文章主要介绍了element form 校验数组每一项的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • jQuery的图片滑块焦点图插件整理推荐

    jQuery的图片滑块焦点图插件整理推荐

    本文给大家整理了9款基于jQuery的图片滑块焦点图插件,效果都非常炫酷,演示和下载地址都给大家整理好了,有需要的小伙伴直接拿走吧,不用跟我客气^_^
    2014-12-12
  • JQuery Ajax执行跨域请求数据的解决方案

    JQuery Ajax执行跨域请求数据的解决方案

    今天小编就为大家分享一篇关于JQuery Ajax执行跨域请求数据的解决方案,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-12-12
  • jQuery中width()方法用法实例

    jQuery中width()方法用法实例

    这篇文章主要介绍了jQuery中width()方法用法,以实例形式较为详细的分析了width()方法获取元素宽度的技巧,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jQuery图片加载显示loading效果

    jQuery图片加载显示loading效果

    这篇文章主要为大家详细介绍了jQuery图片加载显示loading效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • jQuery Autocomplete简介_动力节点Java学院整理

    jQuery Autocomplete简介_动力节点Java学院整理

    这篇文章主要介绍了jQuery Autocomplete简介,jQuery UI Autocomplete是jQuery UI的自动完成组件,是我用过的最强大、最灵活的Autocomplete,它支持本地的Array/JSON数组、通过ajax请求的Array/JSON数组、JSONP、以及Function(最灵活)等方式来获取数据
    2017-07-07
  • jquery tree 可编辑节点实现代码(jquery一句话节点菜单)

    jquery tree 可编辑节点实现代码(jquery一句话节点菜单)

    jquery tree 可编辑节点,实现的三级菜单实现代码,这里我们将为大家准备了两个。一个是锋利的jquery中的一句话导航菜单实现代码。非常不错。
    2009-11-11
  • jQuery实现jQuery-form.js实现异步上传文件

    jQuery实现jQuery-form.js实现异步上传文件

    jquery.form.js是一个非常强大的用于表单提交的插件。这篇文章主要介绍了jQuery实现jQuery-form.js实现异步上传文件,有兴趣的可以了解一下。
    2017-04-04
  • jquery 构造函数在表单提交过程中修改数据

    jquery 构造函数在表单提交过程中修改数据

    这篇文章主要介绍了jquery 构造函数在表单提交过程中修改数据的方法,十分简单实用,有需要的小伙伴可以参考下。
    2015-05-05

最新评论