AJAX在JQuery中的應用詳解
AJAX在jQuery中的應用
1. $.ajax()方法
$.ajax()方法是一個功能十分強悍的一個底層方法，基于該方法實現(xiàn)的$.get()和$.post()都是常用的向服務器請求數(shù)據(jù)的方法。
1.1 $.ajax()中的參數(shù)及使用方法
$.ajax()調用的語法格式為：
$.ajax([options])
其中，可選參數(shù)[options]作為$.ajax()方法中的請求設置，其格式為key/value，既包含發(fā)送請求的參數(shù)，也含有服務器響應回調的數(shù)據(jù)，常用的參數(shù)具體格式如下：
1.2 $.ajax()方法的使用實例
實例中使用的是一個簡單的基于SSH框架的Java Web項目
這里我們通過一個controller來接受一個UserEntity類型的數(shù)據(jù)，然后返回一個Map類型的數(shù)據(jù)，實現(xiàn)頁面的請求。
@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());
//判斷數(shù)據(jù)庫中是否存在這樣一個UserEntity數(shù)據(jù)
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+"http://"+window.location.host+window.location.pathname+"html/index.html";
window.location = indexUrl;
}
},
error : function() {
alert("服務器發(fā)生故障，請嘗試重新登錄！");
}
});
});
});
上述js代碼中，在data部分構造了一個user對象，通過post方法傳遞給服務器時，服務器會將其解析成一個UserEntity類型的user對象（神奇吧，具體的原理我暫時也不是很懂，希望明白人在微博下方留言，不吝賜教）。當contentType設置成"application/x-www-form-urlencoded;charset=UTF-8"時，提交的是一個from表單，而不是我們常用的json對象，但是服務器返回的是一個json對象。然后我們在success后面的函數(shù)中對返回的數(shù)據(jù)進行了解析（一個布爾類型的數(shù)據(jù)），根據(jù)結構進行了簡單的跳轉。
2. 其他請求服務器數(shù)據(jù)的方法
$.get()方法和$.post()方法都是基于$.ajax()方法實現(xiàn)的向服務器請求數(shù)據(jù)的方法，使用起來比起$.ajax()方法更加簡便，需要設置的參數(shù)更少，但是我們更多時候使用的仍然是$.ajax()方法，因為它的可定制程度更高，更加的靈活易用。
2.1 $.get()方法
$.get([options])
該方法在傳入options時，只需要簡單的是設置好url、date、success等選項即可。例如
$.get(
"/user/login",
{name: encodeURI($("#username").val()},
function(data){
....省略邏輯代碼
}
)
由于get方法向服務器發(fā)送請求時，使用K/V格式，如果參數(shù)中含有中文字符，需要通過encodeURI()來進行轉碼。
2.2 $.post()方法
$.post([options])
.post()方法的使用和.post()方法的使用和.get()方法基本一致，事例如下：
$.post(
"/user/login",
{name: encodeURI($("#username").val()},
function(data){
....省略邏輯代碼
}
)
同樣是在參數(shù)中含有中文字符時，需要使用encodeURI()進行轉碼操作
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。如果你想了解更多相關內容請查看下面相關鏈接
相關文章
使用jQuery fancybox插件打造一個實用的數(shù)據(jù)傳輸模態(tài)彈出窗體
模態(tài)窗體已經(jīng)成為Web開發(fā)人員設計界面時經(jīng)常要使用的傳輸數(shù)據(jù)的方式;通過模態(tài)窗口，可以提高網(wǎng)站的可用性;你可以在你的郵件里收到用戶發(fā)送的反饋消息2013-01-01
jquery實現(xiàn)輸入框實時輸入觸發(fā)事件代碼
本文主要分享了jquery實現(xiàn)輸入框實時輸入觸發(fā)事件的代碼，代碼簡單易懂，需要的朋友一起來看下吧2016-12-12
下面小編就為大家?guī)硪黄ㄟ^jquery實現(xiàn)頁面的動畫效果(實例代碼)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要介紹了jQuery實現(xiàn)DIV層收縮展開的方法,實例分析了jQuery中toggle與animate等方法的使用技巧,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細介紹了功能強大的jquery.validate表單驗證插件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
在進行Web開發(fā)時，并非所有的庫都適合你的項目，但你仍需要收藏一些Web UI設計相關的庫或框架，以在你需要的時候，加快你的開發(fā)效率。本文為你推薦10款非常優(yōu)秀的基于JQuery的Web UI設計框架2014-08-08
這篇文章主要介紹了JQuery球隊選擇實現(xiàn)方法,實例分析了jQuery中鼠標事件與頁面元素相關操作技巧,需要的朋友可以參考下2015-05-05
原來ie對默認對彈出窗口有會限制他的大小和位置 所以這就是為什么本地和博客園上看到會不一樣的原因了2010-09-09
jquery.form.js實現(xiàn)將form提交轉為ajax方式提交的方法
這篇文章主要介紹了jquery.form.js實現(xiàn)將form提交轉為ajax方式提交的方法,涉及jQuery插件實現(xiàn)form表單的Ajax提交技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04![jQuery學習筆記[1] jQuery中的DOM操作](http://img.jbzj.com/images/xgimg/bcimg9.png)
jQuery中的DOM操作實現(xiàn)說明，學習DOM操作的朋友可以參考下。2010-12-12