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压缩工具:X2JSCompactor
Jun 13 Javascript
JavaScript几种形式的树结构菜单
May 10 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
AngularJS基础 ng-mousemove 指令简单示例
Aug 02 Javascript
JavaScript 限制文本框不可输入英文单双引号的方法
Dec 20 Javascript
vue监听滚动事件实现滚动监听
Apr 11 Javascript
Vue的路由动态重定向和导航守卫实例
Mar 17 Javascript
微信小程序使用npm支持踩坑
Nov 07 Javascript
JavaScript实现多个物体同时运动
Mar 12 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
PHP6 mysql连接方式说明
2009/02/09 PHP
PHP线程的内存回收问题
2016/07/08 PHP
Yii1.1框架实现PHP极光推送消息通知功能
2018/09/06 PHP
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
node.js中的fs.write方法使用说明
2014/12/15 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
vue.js利用Object.defineProperty实现双向绑定
2017/03/09 Javascript
HTML的select控件美化
2017/03/27 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
2017/11/15 Javascript
小程序简单两栏瀑布流效果的实现
2019/12/18 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
python实现类的静态变量用法实例
2015/05/08 Python
Python实现图片拼接的代码
2018/07/02 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
Flask框架Flask-Login用法分析
2018/07/23 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
深入了解python中元类的相关知识
2019/08/29 Python
python读取与处理netcdf数据方式
2020/02/14 Python
python录音并调用百度语音识别接口的示例
2020/12/01 Python
维也纳通行证:Vienna PASS
2019/07/18 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
儿科护士实习自我鉴定
2013/10/17 职场文书
办公室秘书自我鉴定
2014/01/18 职场文书
远程研修随笔感言
2014/02/10 职场文书
村长贪污检举信
2014/04/04 职场文书
会计演讲稿范文
2014/05/23 职场文书
学生安全责任书范本
2014/07/24 职场文书
爱的奉献演讲稿
2014/09/10 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
教师党员个人自我评价
2015/03/04 职场文书
2015年社区反邪教工作总结
2015/10/14 职场文书
Python面向对象之成员相关知识总结
2021/06/24 Python
在Python 中将类对象序列化为JSON
2022/04/06 Python