在前一篇介绍jQueryAjax的数据加载中的例子都是从静态的文件中取得数据,而Ajax更大的价值在于与后端服务器进行数据传递,动态地请求和发送数据。

请求数据

我们可以使用 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>

我们希望点击 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 标签后,当前页面为:

数据请求成功。我们再用 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>

假设当用户名为 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 后,结果为:

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

 

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

最新资讯
Counterpoint:第三季度中国智能手机出货量下滑14%,小米表现最佳

Counterpoint:第三季

据报道,调研公司Counterpoint今日发布报告称,今年第三季
圆通速递:计划非公开发行A股股票募集资金总额不超过37.9亿元

圆通速递:计划非公开发

圆通速递发布公告称,计划非公开发行A股股票的募集资金
想不起来自己的钱是怎么没的?是移动支付让你失忆了

想不起来自己的钱是怎

如果付款的时候是用手机扫一扫二维码来支付,你的心痛程
诺基亚第三季度调整后营业利润4.86亿欧元,低于市场预期

诺基亚第三季度调整后

诺基亚表示,7-9月基本盈利仍为每股0.05欧元,与去年同期
金洲慈航宣布终止收购优胜教育 因后者经营陷入困境

金洲慈航宣布终止收购

基于优胜腾飞书面回复及我方了解的情况来看,目前优胜腾
“营养又美味”的金属“汉堡”

“营养又美味”的金属

中国科学院合肥物质科学研究院方前锋研究员课题组利用
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,