JQuery 的 Ajax 请求(重点****)

一个风轻云淡

发布于 2022-11-15 17:19:10

1.9K0

发布于 2022-11-15 17:19:10

文章被收录于专栏：java学习java

四个 Ajax 请求方法

$.ajax 方法

$.get 方法

$.post 方法

$.getJSON 方法

一个表单序列化方法

serialize()表单序列化方法

如何使用上面的五个方法：

在 JQuery 中和 Ajax 请求有关的方法有四个

$.ajax 请求参数

url：请求的地址

type : 请求的方式 get 或 post

data : 请求的参数 string 或 json

success: 成功的回调函数

dataType: 返回的数据类型常用 json 或 text

下面的方法必须遵守参数的顺序

.get 请求和.post 请求

url:请求的 URL 地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text

Jquery 的$.getJSON

url:待载入页面的 URL 地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

表单的序列化

serialize() 方法可以把一个 form 表单中所有的表单项。都以字符串 name=value&name=value 的形式进行拼接，省去我们很多不必要的工作。

由于$.get、$.post 和 getJSON 这三个方法的底层都是直接或者间接地使用$.ajax()方法来实现的异步请求的调用。所以我们以$.ajax()方法的使用为示例进行展示：

1）Jquery_Ajax_request.html 的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">

$(function(){

// ajax 请求

$("#ajaxBtn").click(function(){
$.ajax({
url : "ajaxServlet", // 请求地址

error:function(){ // 请求失败回调

alert("请求失败");
},
success:function(data){ // 请求成功回调

alert( data );
},
type:"POST", // 请求的方式

dataType:"json", // 返回的数据类型为 json 对象

data:{ // 请求的参数

action:"jqueryAjax",
a:12,
date: new Date()
}
});
});
// ajax--get 请求

$("#getBtn").click(function(){
$.get(

"ajaxServlet",{
action:"jqueryGet",
a:12,
date:new Date()
},function(data){alert(data);},"json"

);
});

// ajax--post 请求

$("#postBtn").click(function(){

// post 请求

$.post(

"ajaxServlet", // 请求路径

{ // 请求参数

action:"jqueryPost",
a:12,
date:new Date()
},

function(data){ alert( data ) }, // 成功的回调函数

"text" // 返回的数据类型

);
});

// ajax--getJson 请求

$("#getJsonBtn").click(function(){

// 调用

$.getJSON(

"ajaxServlet", // 请求路径

{ // 请求参数

action:"jqueryGetJSON",
a:12,
date:new Date()
},

function(data){ alert( data ) } // 成功的回调函数

);
});

// ajax 请求

$("#submit").click(function(){

// 把参数序列化

var data = $("#form01").serialize();
alert(data);
});
});

</script>
</head>
<body>
<div>
<button id="ajaxBtn">$.ajax 请求</button>
<button id="getBtn">$.get 请求</button>
<button id="postBtn">$.post 请求</button>
<button id="getJsonBtn">$.getJSON 请求</button>
</div>
<br/><br/>
<form id="form01" >

用户名：<input name="username" type="text" /><br/>

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

下拉单选：<select name="single">
<option value="Single">Single</option>
<option value="Single2">Single2</option>
</select><br/>

下拉多选：

<select name="multiple" multiple="multiple">
<option selected="selected" value="Multiple">Multiple</option>
<option value="Multiple2">Multiple2</option>
<option selected="selected" value="Multiple3">Multiple3</option>
</select><br/>

复选：

<input type="checkbox" name="check" value="check1"/> check1

<input type="checkbox" name="check" value="check2" checked="checked"/>

check2<br/>

单选：

<input type="radio" name="radio" value="radio1" checked="checked"/> radio1

<input type="radio" name="radio" value="radio2"/> radio2<br/>
<input id="submit" type="submit" />
</form>
</body>
</html>

2)AjaxServlet 的代码如下：

public class AjaxServlet extends BaseServlet {

private static final long serialVersionUID = 1L;

protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse

response)

throws ServletException, IOException {
System.out.println("ajax 请求过来了 a--" + request.getParameter("a"));
Random random = new Random(System.currentTimeMillis());

// 使用随机数，可以让客户端看到变化

response.getWriter().write(

new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
}

protected void jqueryAjax(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {
System.out.println("jqueryAjax 请求过来了 a--" + request.getParameter("a"));
Random random = new Random(System.currentTimeMillis());

// 使用随机数，可以让客户端看到变化

response.getWriter().write(

new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
}

protected void jqueryGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {
System.out.println("jqueryGet 请求过来了 a--" + request.getParameter("a"));
Random random = new Random(System.currentTimeMillis());

// 使用随机数，可以让客户端看到变化

response.getWriter().write(

new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
}

protected void jqueryPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {
System.out.println("jqueryPost 请求过来了 a--" + request.getParameter("a"));
Random random = new Random(System.currentTimeMillis());

// 使用随机数，可以让客户端看到变化

response.getWriter().write(

new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
}
protected void jqueryGetJSON(HttpServletRequest request, HttpServletResponse

response)

throws ServletException, IOException {
System.out.println("jqueryGetJSON 请求过来了 a--" + request.getParameter("a"));
Random random = new Random(System.currentTimeMillis());

// 使用随机数，可以让客户端看到变化

response.getWriter().write(

new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
}
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-10-24，如有侵权请联系 cloudcommunity@tencent.com 删除

http