AJAX在JQuery中的应用详解
ajax在jquery中的应用
1. $.ajax()方法
$.ajax()方法是一个功能十分强悍的一个底层方法，基于该方法实现的$.get()和$.post()都是常用的向服务器请求数据的方法。
1.1 $.ajax()中的参数及使用方法
$.ajax()调用的语法格式为：
$.ajax([options])
其中，可选参数[options]作为$.ajax()方法中的请求设置，其格式为key/value，既包含发送请求的参数，也含有服务器响应回调的数据，常用的参数具体格式如下：
1.2 $.ajax()方法的使用实例
实例中使用的是一个简单的基于ssh框架的java web项目
这里我们通过一个controller来接受一个userentity类型的数据，然后返回一个map类型的数据，实现页面的请求。
@controller
@requestmapping("/user")
public class usercontroller {
@resource
private iuserservice userservice;
@responsebody
@requestmapping(value="/login", method = requestmethod.post)
public map<string,object> login(userentity user){
map<string,object> map = new hashmap<string,object>();
system.out.println(user.tostring());
//判断数据库中是否存在这样一个userentity数据
boolean loginresult = userservice.isexist(user);
map.put("loginresult", loginresult);
return map;
}
}
前端代码：
<%@ page language="java" import="java.util.*" pageencoding="utf-8"%>
<%
string path = request.getcontextpath();
string basepath = request.getscheme()+"://"+request.getservername()+":"+request.getserverport()+path+"/";
%>
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<base href="<%=basepath%>" rel="external nofollow" >
<title>用户登录</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<link rel="stylesheet" type="text/css" href="<%=basepath %>css/bootstrap.css" rel="external nofollow" >
</head>
<body>
<div>
<div class="input-group">
<span class="input-group-addon" id="name_span">username</span>
<!--从这里输入一个username-->
<input name="username" type="text" class="form-control" placeholder="username" aria-describedby="name_span">
</div>
<div class="input-group">
<span class="input-group-addon" id="password_span">password</span>
<!--从这里输入一个password-->
<input name="password" type="password" class="form-control" placeholder="password" aria-describedby="password_span">
</div>
<!--提交表单-->
<input type="submit" id="loginbtn" class="btn btn-default" value="login" />
</div>
</body>
<script type="text/javascript" src="<%=basepath %>js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="<%=basepath %>js/login.js"></script>
</html>
为了方面讲解，我们将ajax代码单独放到了一个js文件中
$(function() {
$("#loginbtn").click(function() {
console.log("login");
var username = $("input[name=username]").val();
var password = $("input[name=password]").val();
var user = {
"username" : username,
"password" : password
};
$.ajax({
type : "post",
datatype : "json",
data : user,
contenttype : "application/x-www-form-urlencoded;charset=utf-8",
url : "user/login",
async : false,
success : function(data) {
if (false == data.loginresult) {
alert("用户名或者密码错误，请重新登录！");
} else if (true == data.loginresult) {
alert("登录成功！");
var indexurl = window.location.protocol+"//"+window.location.host+window.location.pathname+"html/index.html";
window.location = indexurl;
}
},
error : function() {
alert("服务器发生故障，请尝试重新登录！");
}
});
});
});
上述js代码中，在data部分构造了一个user对象，通过post方法传递给服务器时，服务器会将其解析成一个userentity类型的user对象（神奇吧，具体的原理我暂时也不是很懂，希望明白人在微博下方留言，不吝赐教）。当contenttype设置成"application/x-www-form-urlencoded;charset=utf-8"时，提交的是一个from表单，而不是我们常用的json对象，但是服务器返回的是一个json对象。然后我们在success后面的函数中对返回的数据进行了解析（一个布尔类型的数据），根据结构进行了简单的跳转。
2. 其他请求服务器数据的方法
$.get()方法和$.post()方法都是基于$.ajax()方法实现的向服务器请求数据的方法，使用起来比起$.ajax()方法更加简便，需要设置的参数更少，但是我们更多时候使用的仍然是$.ajax()方法，因为它的可定制程度更高，更加的灵活易用。
2.1 $.get()方法
$.get([options])
该方法在传入options时，只需要简单的是设置好url、date、success等选项即可。例如
$.get(
"/user/login",
{name: encodeuri($("#username").val()},
function(data){
....省略逻辑代码
}
)
由于get方法向服务器发送请求时，使用k/v格式，如果参数中含有中文字符，需要通过encodeuri()来进行转码。
2.2 $.post()方法
$.post([options])
.post()方法的使用和.post()方法的使用和.get()方法基本一致，事例如下：
$.post(
"/user/login",
{name: encodeuri($("#username").val()},
function(data){
....省略逻辑代码
}
)
同样是在参数中含有中文字符时，需要使用encodeuri()进行转码操作
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对的支持。如果你想了解更多相关内容请查看下面相关链接
上一篇： Yii支持多域名cors原理的实现
下一篇： Android自定义实现图片加文字功能