ajax用在那,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 login(UserEntity user){

Map map = new HashMap();

System.out.println(user.toString());

//判断数据库中是否存在这样一个UserEntity数据

boolean loginResult = userService.isExist(user);

map.put("loginResult", loginResult);

return map;

}

}

前端代码：

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

用户登录

UserName

PassWord

为了方面讲解，我们将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()进行转码操作

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接