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 parsefloat parseint 转换函数
Jan 21 Javascript
提取字符串中年月日的函数代码
Nov 05 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
原生JavaScript实现瀑布流布局
Jun 28 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
May 27 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
微信小程序用canvas画图并分享
Mar 09 Javascript
用JS实现选项卡
Mar 23 Javascript
JS实现可控制的进度条
Mar 25 Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 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
php 文件上传代码(限制jpg文件)
2010/01/05 PHP
php include和require的区别深入解析
2013/06/17 PHP
php模板引擎技术简单实现
2016/03/15 PHP
php中简单的对称加密算法实现
2017/01/05 PHP
ThinkPHP 框架实现的读取excel导入数据库操作示例
2020/04/14 PHP
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
一个关于javascript匿名函数的问题分析
2012/03/30 Javascript
JavaScript参数个数可变的函数举例说明
2014/10/10 Javascript
复制网页内容,粘贴之后自动加上网址的实现方法(脚本之家特别整理)
2014/10/16 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
Javascript中click与blur事件的顺序详析
2017/04/25 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
微信小程序textarea层级过高的解决方法
2019/03/04 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
pandas 快速处理 date_time 日期格式方法
2018/11/12 Python
pygame实现成语填空游戏
2019/10/29 Python
python 回溯法模板详解
2020/02/26 Python
解决Firefox下不支持outerHTML问题代码分享
2014/06/04 HTML / CSS
英国领先的维生素和补充剂品牌:Higher Nature
2019/08/26 全球购物
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
学期研究性学习个人的自我评价
2014/01/09 职场文书
单位成立周年感言
2014/01/26 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
小学语文教学经验交流材料
2014/06/02 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
廉政承诺书范文
2015/04/28 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
亲情作文之母爱
2019/09/25 职场文书
解决mysql的int型主键自增问题
2021/07/15 MySQL