您的位置：首页 > Web前端 > JQuery

Ajax在jQuery中的应用---ajax()方法

2015-01-28 10:33 387 查看

在jQuery中，$.ajax()方法是最底层的方法，也是功能最强的方法。其调用的语法格式为：

$.ajax([options])

其中，可选项参数[options]为$.ajax()方法中的请求设置，其格式为key/value，既包含发送请求的参数，也含有服务器相应后回调的数据，其全部名称如下表所示。

参数名	类型	描述
url	String	发送请求的地址（默认为当前页面）
type	String	数据请求方式（post或get），默认为get
data	String或Object	发送到服务器的数据。如果不是字符串则自动转成字符串格式，如果是get请求方式，那么，该字符串将附在url的后面
dataType	String	服务器返回的数据类型，如果没有指定，jQuery将自动根据HTTP包MIME信息自动判断，服务器返回的数据根据自动判断的结果进行解析，传递给回调函数，其可用类型为： html：返回纯文本的HTML信息，包含的Script标记会在插入页面时被执行 script：返回纯文本JavaScript代码 text：返回纯文本字符串 xml：返回可被jQuery处理的XML文档 json：返回JSON格式的数据
beforeSend	Function	该函数用于发送请求前修改XMLHttpRequest对象，其中的参数就是XMLHttpRequest对象，由于该函数本身是jQuery事件，因此如果函数返回false，则表示取消本次事件
complete	Function	请求完成后调用的回调函数，该函数无论数据发送成功或失败都会调用，其中有两个参数，一个是XMLHttpRequest对象，另外一个是strStatus，用于描述成功请求类型的字符串
success	Function	请求成功后调用的回调函数，该函数有两个参数，一个是根据参数dataType处理后服务器返回的数据data，另外一个是strStatus，用于描述状态的字符串
error	Function	请求失败后调用的回调函数，该函数有三个参数，第一个是XMLHttpRequest对象，第二个是出错信息strError，第三个是捕捉到的错误对象strObject
timeout	Number	请求超时的时间（毫秒），该设置将覆盖$.ajaxSetup()方法中的同样设置
global	Boolean	是否相应全局事件，默认是true，表示相应，如果设置成false，表示不响应，那个全局事件$.ajaxStart等将不响应
async	Boolean	是否为异步请求，默认是true，表示异步，如果设置成false，表示同步请求
cache	Boolean	是否进行页面缓存，true表示进行缓存，false表示不进行页面缓存

下面通过一个简单示例介绍jQuery中$.ajax()方法在数据交互过程中的应用。

1.创建一个用于登录的界面login.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>$.ajax()方法发送请求</title>
<script type="text/javascript" src="jquery-1.9.0.js">
</script>
<style type="text/css">
body{font-size:13px}
.divFrame{width:225px;border:solid 1px #666}
.divFrame .divTitle{padding:5px;background-color:#eee;height:23px}
.divFrame .divTitle span{float:left;padding:2px;padding-top:5px;}
.divFrame .divContent{padding:8px;text-align:center}
.divFrame .divContent .clsShow{font-size:14px;line-height:2.0em}
.divFrame .divContent .clsShow .clsError{font-size:13px;border:solid 1px #cc3300;padding:2px;display:none;margin-bottom:5px;background-                                                    color:#ffe0a3}
.txt{border:#666 1px solid;padding:2px;width:150px;margin-right:3px}
.btn {border:#666 1px solid;padding:2px;width:50px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
</style>
<script type="text/javascript">
$(function() {
$("#btnLogin").click(function() {
var strTxtName = encodeURI($("#txtName").val());
var strTxtPass = encodeURI($("#txtPass").val());
$.ajax({
url: "login.do",
dataType: "html",
data: { txtName: strTxtName, txtPass: strTxtPass },
success: function(data) {
if (data == "true") {
$(".divContent").html("操作提示，登录成功！");
}else {
$("#divError").show().html("用户名或密码错误！");
}
},
error:function(){
alert("出错了！");
}
})
})
})
</script>
</head>
<body>
<form id="frmUserLogin">
<div class="divFrame">
<div class="divTitle"><span>用户登录</span></div>
<div class="divContent">
<div id="divError" class="clsError"></div>
<div>名称：<input id="txtName" type="text" class="txt" /></div>
<div>密码：<input id="txtPass" type="password" class="txt" /></div>
<div>
<input id="btnLogin" type="button" value="登录" class="btn" />  
<input id="btnReset"  type="reset" value="取消" class="btn" />
</div>
</div>
</div>
</form>
</body>
</html>

2.创建一个后台处理的servlet---Login.java

package com;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.net.URLDecoder;

@WebServlet(name = "Login")
public class Login extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String strName = URLDecoder.decode(request.getParameter("txtName"), "UTF-8");
String strPass = URLDecoder.decode(request.getParameter("txtPass"),"UTF-8");
boolean blnLogin = false;
if(strName.equals("admin") && strPass.equals("123456")){
blnLogin = true;
}
response.getWriter().print(blnLogin);//此处的blnLogin将传到前面的login.html页面中，传给success: function(data){}中的data
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}

3.配置web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" version="3.1">
<servlet>
<servlet-name>login</servlet-name>
<servlet-class>com.Login</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>login</servlet-name>
<url-pattern>/login.do</url-pattern> <!-- 此处的"/login.do"对应于login.html中的$.ajax()中的url的值"login.do" -->
</servlet-mapping>
<welcome-file-list>
<welcome-file>login.html</welcome-file>
</welcome-file-list>
</web-app>

在页面login.html中，通过页面中“登录”按钮的单击事件，调用$.ajax()方法，将获取的用户名和密码发送到服务器，服务器相应请求，向客户端发送处理后的数据，客户端根据回调的数据，显示不同的页面效果。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航