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代码
Dec 03 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 Javascript
使用javascript做的一个随机点名程序
Feb 13 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
跨域请求的完美解决方法(JSONP, CORS)
Jun 12 Javascript
最全的Javascript编码规范(推荐)
Jun 22 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
微信小程序之批量上传并压缩图片的实例代码
Jul 05 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 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也可以?成Shell Script
2006/10/09 PHP
关于PHP session 存储方式的详细介绍
2013/06/25 PHP
linux中cd命令使用详解
2015/01/08 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
javascript 面向对象编程 万物皆对象
2009/09/17 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
chrome原生方法之数组
2011/11/30 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
js获取ip和地区
2017/03/10 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
2018/05/04 Javascript
解决layer弹出层中表单不起作用的问题
2019/09/09 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
详解React 元素渲染
2020/07/07 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python中的格式化输出用法总结
2016/07/28 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
用python写一个windows下的定时关机脚本(推荐)
2017/03/21 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
Python转换时间的图文方法
2019/07/01 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
numpy数组广播的机制
2019/07/12 Python
Python Web项目Cherrypy使用方法镜像
2020/11/05 Python
工商管理实习自我鉴定
2013/09/28 职场文书
大学生简历的个人自我评价
2013/12/04 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
python爬虫--selenium模块
2021/03/31 Python