jQuery的Ajax开发步骤

一、jQuery的Ajax编程

1.回顾传统Ajax开发步骤

①:创建xmlHttpRequest对象

var xmlHttp = creatHttpRequest();

②:绑定回调函数

xmlHttp.onreadystatechange = function(){……}

③:建立连接

xmlHttp.open(“GET”,”url”);

④:发送数据

xmlHttp.send(null) //GET请求

如果是POST请求需要设置编码格式:

xmlHttp.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");

xmlHttp.send(“key=value?key=value”)

⑤:书写回调函数

if(readyState == 4){

if(status ==200){

……

//操作xmlHttp.responseText主要针对返回HTML片段和json

//操作xmlHttp.responseXML主要针对返回XML片段。

}

}

2.jQuery的Ajax开发

jQuery提供了最底层的Ajax调用方法:$.ajax

$.ajax{

type:”POST”

url: “some.php”

data: "name=John&location=Boston",

success: function(msg){

alert( "Data Saved: " + msg );

}

}

// 因为使用比较繁琐,所以在实际开发中,应用很少

为了简化Ajax开发,jQuery提供了对$.ajax()进一步的封装方法$load、$get、$post。这三个方法不支持跨域,$getJSON、$getScript支持跨域。

①:load方法

load方法是jQuery中最为简单和常用的Ajax方法,处理HTML片段此方法最为合适。

语法

$("jquery对象").load("url","data") ;

url:Ajax访问服务器地址

data:请求参数

返回内容HTML片段 ,自动放入$("jquery对象")innerHTML 中(如果返回的数据需要处理,我们可以使用get或者post)

load()方法的传递参数根据参数data来自动自定。如过没有参数的传递,采用GET方式传递,否则采用POST方式

练习一:校验用户名是否存在

此练习在第五章的第三小节有实现代码,这里使用jQuery的方式进行简要的列出核心代码:

$(function(){

// 为用户名添加离焦事件

$("input[name='username']").blur(function(){

// 获得当前输入 username

var username = $(this).val();

// 提交Ajax校验

$("#info").load("/Ajax/checkUsername" , {'username': username});

});

});

<form>

<!-- div display:block 自动换行效果 span display:inline; 不会换行 -->

用户名 <input type="text" name="username" /><span id="info"></span> <br/>

密码 <input type="password" name="password"/><br/>

<input type="submit" value="注册" />

</form>

②:get方法和post方法

语法 :

$.get/$.post("url","parameter",function(data){...});

url Ajax访问服务器地址

parameter 代表请求参数

function 回调函数 data 代表从服务器返回数据内容

这里data代表各种数据内容 : HTML片段、JSON、XML

如果传递参数给服务器使用 $.post , 不需要传参数 可以使用 $.get

原文发布于微信公众号 - Java帮帮(javahelp)

原文发表时间:2017-03-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏lonelydawn的前端猿区

初学redis之windows服务配置与启动

初学redis首先要配置好服务, redis在Linux上的安装只要按照官方指导来,很快很简单。 下面来谈谈redis在windows上的安装。 官网虽然没给r...

2245
来自专栏BIT泽清

React Native应用部署/马甲包热更新-CodePush最新集成总结(2018年最新)

React Native支持大家用React Native技术开发APP,并打包生成一个APP。在动态更新方面React Native只是提供了动态更新的基础,...

3120
来自专栏开发之途

Android 实现扫码登录

4545
来自专栏图像识别与深度学习

Mysql常见问题解决

3569
来自专栏王磊的博客

聊聊excel生成图片的几种方式

目录     I:需求。    II:实现思路。     III:实现方式。     IV:优缺点分析。     V:结论。     VI:wps安装与配置。 ...

36111
来自专栏程序员同行者

ssh升级

2131
来自专栏小程序之家

如何在小程序中实现文件上传下载

在如何实现小程序登录鉴权这篇文章中,我们实现了小程序的wx.request请求操作,除了request之外,小程序还有文件下载wx.downloadFile和文...

12K7
来自专栏流柯技术学院

Python自动化测试工具Splinter简介和使用实例

Splinter 快速介绍 官方网站:http://splinter.cobrateam.info/ 官方介绍: Splinter is an open ...

1342
来自专栏技术博文

SSDB 配置文件

SSDB 的配置非常简单, 附带的 ssdb.conf 你不用修改便可以使用. 如果你要高度定制, 还是需要修改一些配置的. 下面做介绍. SSDB 的配置文件...

2715
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native应用部署/热更新-CodePush最新集成总结(新)

React Native应用部署/热更新-CodePush最新集成总结(新) ---- 更新说明: 此次博文更新适配了最新版的CodePush v1.17....

7316

扫码关注云+社区

领取腾讯云代金券