jQuery学习笔记之 Ajax操作篇(二) - 数据传递


Posted in Javascript onJune 23, 2014

请求数据

我们可以使用 GET、POST 两种方式向后端请求数据,这里以 PHP 为例,假设有测试页面 age.php,用于返回年龄信息,内容为:

if(isset($_REQUEST['name']) && $_REQUEST['name'] == 'stephen') {
  echo '23';
}

当前页面内容为:

<div>
 <a href="age.php">stephen</a>
 <span>age : </span>
 <span id="sex"></span>
</div>

jQuery学习笔记之 Ajax操作篇(二) - 数据传递

我们希望点击 a 标签后,在不刷新页面的前提下获取年龄信息。首先用 GET 方式请求数据:

GET 方式

$('a').click(function(e) {
  e.preventDefault();//
  var url = $(this).attr('href'),
   name = $(this).text(),
   requestData = {'name': name};

  $.get(url, requestData, function(data) {
   $('#sex').html(data);
  });
 });

点击 a 标签后,当前页面为:

jQuery学习笔记之 Ajax操作篇(二) - 数据传递

数据请求成功。我们再用 POST 方式测试下:

POST 方式

$('a').click(function(e) {
  e.preventDefault();//
  var url = $(this).attr('href'),
   name = $(this).text(),
   requestData = {'name': name};

  $.post(url, requestData, function(data) {
   $('#sex').html(data);
  });
 });

代码几乎一样,只是由 get 方法变为了 post 方法。
这里我们其实还可以用 load 方法简化代码:

$('a').click(function(e) {
  e.preventDefault();
  var url = $(this).attr('href'),
   name = $(this).text(),
   requestData = {'name': name};

  $('#sex').load(url, requestData);
 });

发送数据

除了可以使用 Ajax 技术从后端获取数据,还可以向后端发送数据,常见的就是异步提交表单的情景,这里以用户验证为例:

<form action="validate.php">
 username:<input id="username" name="username" type="text" />
 password:<input id="password" name="password" type="text" />
 <input value="submit" type="submit" />
</form>

jQuery学习笔记之 Ajax操作篇(二) - 数据传递

假设当用户名为 stephenlee,密码为 123456 时验证通过,否则失败,测试页面 validate.php 为:

if($_REQUEST['username'] == 'stephenlee' && $_REQUEST['password'] == '123456') {
  echo 'pass';
} else {
  echo 'fail';
}

使用 get 方式发送数据到后端验证:

$('form').submit(function(e) {
  e.preventDefault();//
  var url = $(this).attr('action'), 
   username = $('input[name="username"]').val(),
   password = $('input[name="password"]').val(),
   requestData = {'username': username, 'password': password};

  $.get(url, requestData, function(result) {
   alert(result);
  });
 });

输入错误用户名 lucas 后,结果为:

jQuery学习笔记之 Ajax操作篇(二) - 数据传递

输入正确用户名 stephenlee 后,结果为:

 jQuery学习笔记之 Ajax操作篇(二) - 数据传递

使用 post 方式发送数据思路相同,就不再赘述了。

Javascript 相关文章推荐
dropdownlist之间的互相联动实现(显示与隐藏)
Nov 24 Javascript
jquery利用ajax调用后台方法实例
Aug 23 Javascript
JQuery中的html()、text()、val()区别示例介绍
Sep 01 Javascript
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
node中koa中间件机制详解
Aug 22 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
AngularJS动态添加数据并删除的实例
Feb 27 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 Javascript
Ajax异步刷新功能及简单案例
Nov 20 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 #Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 #Javascript
yepnope.js使用详解及示例分享
Jun 23 #Javascript
js的延迟执行问题分析
Jun 23 #Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 #Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
Jun 23 #Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 #Javascript
You might like
PHP中的超全局变量
2006/10/09 PHP
简单的用PHP编写的导航条程序
2006/10/09 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
thinkphp3.0输出重复两次的解决方法
2014/12/19 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
基于PHP制作验证码
2016/10/12 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
基于jquery的大众点评,分类导航实现代码
2011/08/23 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
JQuery实现图片轮播效果
2017/05/08 jQuery
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
OpenLayers3实现鼠标移动显示坐标
2020/09/25 Javascript
Python中使用中文的方法
2011/02/19 Python
浅谈python新手中常见的疑惑及解答
2016/06/14 Python
python实现SOM算法
2018/02/23 Python
Python HTML解析模块HTMLParser用法分析【爬虫工具】
2019/04/05 Python
Python socket非阻塞模块应用示例
2019/09/12 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
Bath & Body Works阿联酋:在线购买沐浴和身体用品
2021/02/27 全球购物
介绍一下Make? 为什么使用make
2016/07/31 面试题
高级工程师英文求职信
2014/03/19 职场文书
会计系毕业求职信
2014/08/07 职场文书
工作作风承诺书
2014/08/30 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
2015年质检工作总结
2015/05/04 职场文书
企业工会工作总结2015
2015/05/13 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
祝酒词范文
2015/08/12 职场文书
详解Python 3.10 中的新功能和变化
2021/04/28 Python