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 相关文章推荐
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
JavaScript中URL编码函数代码
Jan 11 Javascript
Javascript冒泡排序算法详解
Dec 03 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
jQuery事件委托之Safari
Jul 05 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
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 操作文件的一些FAQ总结
2009/02/12 PHP
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
移动端JQ插件hammer使用详解
2015/07/03 Javascript
javascript实现表单验证
2016/01/29 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
Angularjs中使用layDate日期控件示例
2017/01/11 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
在node中使用jwt签发与验证token的方法
2019/04/03 Javascript
vue-cli3.0实现一个多页面应用的历奇经历记录总结
2020/03/16 Javascript
浅谈使用nodejs搭建web服务器的过程
2020/07/20 NodeJs
python Pandas 读取txt表格的实例
2018/04/29 Python
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
python-itchat 统计微信群、好友数量,及原始消息数据的实例
2019/02/21 Python
django 连接数据库 sqlite的例子
2019/08/14 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
DHC美国官网:日本通信销售第一的化妆品品牌
2017/11/12 全球购物
《青蛙看海》教学反思
2014/04/23 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
客户答谢会活动方案
2014/08/31 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
学校食堂食品安全承诺书
2015/04/29 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
Django如何创作一个简单的最小程序
2021/05/12 Python
如何使用flask将模型部署为服务
2021/05/13 Python
Nginx实现高可用集群构建(Keepalived+Haproxy+Nginx)
2021/05/27 Servers
MySQL系列之十二 备份与恢复
2021/07/02 MySQL
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技