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 相关文章推荐
JS生成不重复随机数组的函数代码
Jun 10 Javascript
js实现数组转换成json
Jun 26 Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 Javascript
微信小程序 http请求的session管理
Jun 07 Javascript
基于Vue.js实现tab滑块效果
Jul 23 Javascript
vue项目tween方法实现返回顶部的示例代码
Mar 02 Javascript
vue 之 .sync 修饰符示例详解
Apr 21 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
详解javascript对数组和json数组的操作
Apr 15 Javascript
Vue 嵌套路由使用总结(推荐)
Jan 13 Javascript
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 Javascript
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
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
全国FM电台频率大全 - 11 浙江省
2020/03/11 无线电
php imagecreatetruecolor 创建高清和透明图片代码小结
2010/05/15 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
php面向对象的用户登录身份验证
2017/06/08 PHP
PHP面向对象中new self()与 new static()的区别浅析
2017/08/17 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
浅谈JavaScript 框架分类
2014/11/10 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
JS中Select下拉列表类(支持输入模糊查询)功能
2017/01/17 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
javascript实现评分功能
2020/06/24 Javascript
在Python的gevent框架下执行异步的Solr查询的教程
2015/04/16 Python
python paramiko模块学习分享
2017/08/23 Python
python tkinter组件摆放方式详解
2019/09/16 Python
Python第三方库的几种安装方式(小结)
2020/04/03 Python
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
Clarisonic美国官网:科莱丽声波洁面仪
2017/10/12 全球购物
冰淇淋店创业计划书范文
2013/12/27 职场文书
教育课题研究自我鉴定范文
2013/12/28 职场文书
女方回门宴答谢词
2014/01/14 职场文书
英语生日邀请函
2014/01/23 职场文书
企业形象策划方案
2014/05/29 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
个人股份合作协议书
2014/10/24 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
sql字段解析器的实现示例
2021/06/23 SQL Server
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server