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 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
js滚动条回到顶部的代码
Dec 06 Javascript
js数组操作常用方法
May 08 Javascript
window.location.href的用法(动态输出跳转)
Aug 09 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
html的DOM中document对象images集合用法实例
Jan 21 Javascript
js与applet相互调用的方法
Jun 22 Javascript
全面了解javascript三元运算符
Jun 27 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
Aug 01 Javascript
微信小程序用户拒绝授权的处理方法详解
Sep 20 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 23 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 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
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
javascript跨域刷新实现代码
2011/01/01 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
jQuery查找节点方法完整实例
2016/09/13 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
详解Vue一个案例引发「内容分发slot」的最全总结
2018/12/02 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
2020/05/17 Javascript
js实现详情页放大镜效果
2020/10/28 Javascript
python错误处理详解
2014/09/28 Python
python回调函数用法实例分析
2015/05/09 Python
pycharm远程调试openstack代码
2017/11/21 Python
python动态文本进度条的实例代码
2020/01/22 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
Python实现数字的格式化输出
2020/08/01 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
联想台湾官网:Lenovo TW
2018/05/09 全球购物
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
仓库门卫岗位职责
2013/12/22 职场文书
迟到检讨书400字
2014/01/13 职场文书
食品安全检查制度
2014/02/03 职场文书
投资合作协议书
2014/04/17 职场文书
青奥会口号
2014/06/12 职场文书
保卫钓鱼岛口号
2014/06/20 职场文书
个人党性分析总结
2015/03/05 职场文书
新人入职感言
2015/07/31 职场文书
MySQL七种JOIN类型小结
2021/10/24 MySQL