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 相关文章推荐
动态加载js的几种方法
Oct 23 Javascript
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
javascript 获取浏览器版本
Jan 21 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
从零学习node.js之模块规范(一)
Feb 21 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 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
laravel 如何实现引入自己的函数或类库
2019/10/15 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
php实现微信和支付宝支付的示例代码
2020/08/11 PHP
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
使用jquery实现select添加实现后台权限添加的效果
2011/05/28 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
2014/01/02 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
bootstrap table小案例
2016/10/21 Javascript
js实现密码强度检验
2017/01/15 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
python字符串连接方式汇总
2014/08/21 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
解决django model修改添加字段报错的问题
2019/11/18 Python
wxPython多个窗口的基本结构
2019/11/19 Python
python可视化text()函数使用详解
2020/02/11 Python
基于python实现对文件进行切分行
2020/04/26 Python
Django实现任意文件上传(最简单的方法)
2020/06/03 Python
python的setattr函数实例用法
2020/12/16 Python
Infababy英国:婴儿推车、Travel System婴儿车和婴儿汽车座椅销售
2018/05/23 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
vue实现倒计时功能
2021/03/24 Vue.js
审计主管岗位职责
2014/01/31 职场文书
毕业生就业推荐表自我鉴定
2014/03/20 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
英文求职信范文
2014/05/23 职场文书
家具商场的活动方案
2014/08/16 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
中学生国庆节演讲稿2015
2015/07/30 职场文书
团支部书记竞选稿
2015/11/21 职场文书
小学生法制教育心得体会
2016/01/14 职场文书
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
python 如何用map()函数创建多线程任务
2021/04/07 Python