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+jquery等)
Mar 24 Javascript
js验证整数加保留小数点的简单实例
Dec 02 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
axios基本入门用法教程
Mar 25 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 Javascript
Express进阶之log4js实用入门指南
Feb 10 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
如何实现一个简易版的vuex持久化工具
Sep 11 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递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
PHP设计模式之工厂模式定义与用法详解
2018/04/03 PHP
javascript 实现父窗口引用弹出窗口的值的脚本
2007/08/07 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
js密码强度校验
2015/11/10 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
jQuery、layer实现弹出层的打开、关闭功能
2017/06/28 jQuery
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
2020/06/06 jQuery
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
[03:54]Ehome出征西雅图 回顾2016国际邀请赛晋级之路
2016/08/02 DOTA
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
python调用机器喇叭发出蜂鸣声(Beep)的方法
2015/03/23 Python
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
Python实现列表转换成字典数据结构的方法
2016/03/11 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
详解Pymongo常用查询方法总结
2021/01/29 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
编程实现去掉XML的重复结点
2014/05/28 面试题
没有孩子的离婚协议书怎么写
2014/09/17 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
狮子林导游词
2015/02/03 职场文书
大学生毕业个人总结
2015/02/15 职场文书
通知的格式范文
2015/04/27 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
羊脂球读书笔记
2015/06/30 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
2016党员入党决心书
2015/09/22 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技