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 23 Javascript
更正确的asp冒泡排序
May 24 Javascript
javascript attachEvent和addEventListener使用方法
Mar 19 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
javascript移动设备Web开发中对touch事件的封装实例
Jun 05 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 Javascript
express框架下使用session的方法
Jul 31 Javascript
基于vue--key值的特殊用处详解
Jul 31 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面向对象全攻略 (十六) 对象的串行化
2009/09/30 PHP
PHP下判断网址是否有效的代码
2011/10/08 PHP
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
2011/03/28 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
js判断登录与否并确定跳转页面的方法
2015/01/30 Javascript
JQuery跳出each循环的方法
2015/04/16 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
JavaScript接口的实现三种方式(推荐)
2016/06/14 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
vue2.0 如何把子组件的数据传给父组件(推荐)
2018/01/15 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
JavaScript字符和ASCII实现互相转换
2020/06/03 Javascript
javascript运行机制之执行顺序理解
2020/08/03 Javascript
js实现网页随机验证码
2020/10/19 Javascript
Python2.5/2.6实用教程 入门基础篇
2009/11/29 Python
Python实现的密码强度检测器示例
2017/08/23 Python
浅谈Django的缓存机制
2018/08/23 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
python实现KNN分类算法
2019/10/16 Python
python实现126邮箱发送邮件
2020/05/20 Python
基于python 将列表作为参数传入函数时的测试与理解
2020/06/05 Python
基于python实现操作git过程代码解析
2020/07/27 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
英国DVD和蓝光碟片购买网站:Zoom.co.uk(电影和电视)
2019/09/23 全球购物
四年的个人工作自我评价
2013/12/10 职场文书
少儿节目主持串词
2014/04/02 职场文书
一岗双责责任书
2014/04/15 职场文书
优秀求职信
2014/05/29 职场文书
避暑山庄导游词
2015/02/04 职场文书
测量员岗位职责
2015/02/14 职场文书