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 选取方法都有哪些
May 18 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
微信小程序  Mustache语法详细介绍
Oct 27 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 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
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
PHP parse_url 一个好用的函数
2009/10/03 PHP
PHP常用代码大全(新手入门必备)
2010/06/29 PHP
利用php+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
php include和require的区别深入解析
2013/06/17 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
PHP从零开始打造自己的MVC框架之入口文件实现方法详解
2019/06/03 PHP
PHP论坛实现积分系统的思路代码详解
2020/06/01 PHP
javascript void(0)的妙用
2009/10/21 Javascript
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
2015/05/25 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
2019/04/20 Javascript
前端插件之Bootstrap Dual Listbox使用教程
2019/07/23 Javascript
TypeScript高级用法的知识点汇总
2019/12/17 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
Python中字典的基础知识归纳小结
2015/08/19 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
Python流程控制 while循环实现解析
2019/09/02 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
python开发一个解析protobuf文件的简单编译器
2020/11/17 Python
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
您的时尚,您的生活方式:DTLR Villa
2019/12/25 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
自考毕业生自我鉴定
2013/11/04 职场文书
英语演讲稿范文
2014/01/03 职场文书
村优秀党员事迹材料
2014/01/15 职场文书
新护士岗前培训制度
2014/02/02 职场文书
销售经理岗位职责
2015/01/31 职场文书
办公室主任岗位职责范本
2015/03/31 职场文书
担保贷款承诺书
2015/04/30 职场文书
学校禁毒宣传活动总结
2015/05/08 职场文书