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的变量值传递给ASP变量
Dec 10 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
JS随机打乱数组的方法小结
Jun 22 Javascript
如何写好你的JavaScript【推荐】
Mar 02 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
JavaScript数据结构之链表的实现
Mar 19 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
Bootstrap Table快速完美搭建后台管理系统
Sep 20 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
JS中的函数与对象的创建方式
May 12 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
PHP的foreach中使用引用时需要注意的一个问题和解决方法
2014/05/29 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
再谈javascript常见错误及解决方法
2016/09/16 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
vue实现ToDoList简单实例
2017/02/07 Javascript
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
JS变量及其作用域
2017/03/29 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
ES6 let和const定义变量与常量的应用实例分析
2019/06/27 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
Python中使用md5sum检查目录中相同文件代码分享
2015/02/02 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
Python中字符串List按照长度排序
2019/07/01 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
pytorch forward两个参数实例
2020/01/17 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
Python暴力破解Mysql数据的示例
2020/11/09 Python
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
升职自荐信
2013/11/28 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
邮政营业员岗位职责
2015/04/14 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang