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 相关文章推荐
基于jquery的滚动新闻列表
Jun 19 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
node.js回调函数之阻塞调用与非阻塞调用
Nov 13 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
学习Node.js模块机制
Oct 17 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
ES6中module模块化开发实例浅析
Apr 06 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
Jul 12 Javascript
vue+elementUI实现图片上传功能
Aug 20 Javascript
小程序实现左滑删除的效果的实例代码
Oct 19 Javascript
vue3为什么要用proxy替代defineProperty
Oct 19 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
重置版游戏视频
2020/04/09 魔兽争霸
关于拼配咖啡,你要知道
2021/03/03 咖啡文化
解析php常用image图像函数集
2013/06/24 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
PHP使用array_multisort对多个数组或多维数组进行排序
2014/12/16 PHP
php使用Jpgraph绘制饼状图的方法
2015/06/10 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
PHP实现简易计算器功能
2020/08/28 PHP
JQuery 弹出框定位实现方法
2010/12/02 Javascript
jQuery的链式调用浅析
2010/12/03 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
jQuery 复合选择器应用的几个例子
2014/09/11 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
Vue前后端不同端口的实现方法
2018/09/19 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
[02:27]2018DOTA2亚洲邀请赛赛前采访-OpTic
2018/04/03 DOTA
在IPython中执行Python程序文件的示例
2018/11/01 Python
PowerBI和Python关于数据分析的对比
2019/07/11 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
python os.path.isfile()因参数问题判断错误的解决
2019/11/29 Python
python3获取文件中url内容并下载代码实例
2019/12/27 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
简约控的天堂:The Undone
2016/12/21 全球购物
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
德国亚马逊官方网站:Amazon.de
2020/11/15 全球购物
大四本科生的自我评价
2013/12/30 职场文书
中文专业毕业生自荐书范文
2014/01/04 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript
一些让Python代码简洁的实用技巧总结
2021/08/23 Python