用JavaScript写AJAX前面已经介绍过了，主要问题就是不同浏览器需要写不同代码，并且状态和错误处理写起来很麻烦。
用jQuery的相关对象来处理AJAX，不但不需要考虑浏览器问题，代码也能大大简化。
在jQuery用于支持AJAX的众多API中，最常用的就是load(),get(),post()函数了。load(),get(),post()函数虽然使用比较简单，但是它们已经可以完成大部分常用AJAX功能。
一 load(url,[data],[callback])函数
函数名：load(url,[data],[callback])
作用：载入远程HTML文件代码并插入DOM中
返回值：jQuery
参数：
url,String ，请求的HTML页的url地址
data（可选），Object，发送至服务器的key/value数据
callback（可选），回调函数，请求完成时（不需要是success）的回调函数，自动会将请求结果，状态，XMLHttp对象传递给函数
这个方法默认使用get方式传递，如果[data]参数有传递数据进去，就会自动转换为post方式。
这个方法可以很方便的加载一些HTML文件，例如有如下一个HTML文件，名称为7_20test.html，其中只有一段文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Apache Maven is a software project management and comprehension tool. Based on the concept of a project object model (POM), Maven can manage a project's build, reporting and documentation from a central piece of information.
If you think that Maven could help your project, you can find out more information about in the "About Maven" section of the navigation. This includes an in-depth description of what Maven is, a list of some of its main features, and a set of frequently asked questions about what Maven is.
This site is separated into the following sections, depending on how you'd like to use Maven:
</body>
</html>
测试页面如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>load</title>
</head>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#test").click(function () {
$("#result").load("7_20test.html",function (responseText,textStatus,XMLHttpRequest) {
$("#display").append("<b>responseText:</b>"+responseText+"<br>");
$("#display").append("<b>textStatus:</b>"+textStatus+"<br>");
$("#display").append("<b>XMLHttpRequest</b>"+XMLHttpRequest)
});
});
});
</script>
<body>
<div id="wrapper">
<h1>jQuery Playground</h1>
<div id="content">
<button id="test">测试</button>
<h2 >内容显示：</h2>
<div id="result"></div>
<h2>结果：</h2>
<div id="display"></div>
</div>
</div>
</body>
</html>
结果显示
测试页面
结果显示
核心代码
$(function () {
$("#test").click(function () {
$("#result").load("7_20test.html",function (responseText,textStatus,XMLHttpRequest) {
$("#display").append("<b>responseText:</b>"+responseText+"<br>");
$("#display").append("<b>textStatus:</b>"+textStatus+"<br>");
$("#display").append("<b>XMLHttpRequest</b>"+XMLHttpRequest)
});
});
});
二 $.get(url,[data],[callback],[type])函数
jQuery中的get(url,[data],[callback],[type])函数用以get方式来进行ajax异步请求。请求成功时可调用回调函数。
函数名：$.get(url,[data],[callback],[type])
作用：使用get方式来进行异步请求
返回值：jQuery
参数：
url：Sting，请求的html页的url地址
data（可选）：Object,发送至服务器key/value数据
callback（可选）：function，请求完成时（不需要是success）的回调函数，自动会将请求的结果，状态，XMLHttp对象传递给该函数。
type（可选）：String，客户端请求的类型（JSON,XML等）
服务器端有名为TestGetServlet的文件，代码如下：
package servlet;
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;
/**
* Created by pc on 2017/7/20.
*/
@WebServlet(name = "TestGetServlet",urlPatterns = "/TestGetServlet")
public class TestGetServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String name=request.getParameter("name");
System.out.println(name);
response.getWriter().print(name);
}
}
测试代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GET</title>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("button").click(function () {
$.get("/TestGetServlet",
{name:"张三"},
function (data,status) {
$("#display").append("<b>data:</b>"+data+"<br>");
$("#display").append("<b>status</b>"+status);
});
}) ;
});
</script>
</head>
<body>
<div id="wrapper">
<h1>jQuery Playground</h1>
<div id="content">
<button id="test">测试</button>
<h2>结果：</h2>
<div id="display"></div>
</div>
</div>
</body>
</html>
运行结果
测试页面
运行结果
核心代码
$(function () {
$("button").click(function () {
$.get("/TestGetServlet",
{name:"张三"},
function (data,status) {
$("#display").append("<b>data:</b>"+data+"<br>");
$("#display").append("<b>status</b>"+status);
});
}) ;
});
三 $.post(url,[data],[callback],[type])函数
函数名：$.post(url,[data],[callback],[type])
作用：使用post方式来进行异步请求
返回值：jQuery
参数：
url：Sting，请求的html页的url地址
data（可选）：Object,发送至服务器key/value数据
callback（可选）：function，请求完成时（不需要是success）的回调函数，自动会将请求的结果，状态，XMLHttp对象传递给该函数。
type（可选）：String，客户端请求的类型（JSON,XML等）
服务器端有名为TestPostServlet的文件，代码如下：
package servlet;
import com.mysql.cj.xdevapi.JsonArray;
import jdk.nashorn.internal.runtime.JSONListAdapter;
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;
/**
* Created by pc on 2017/7/20.
*/
@WebServlet(name = "TestPostServlet",urlPatterns="/TestPostServlet")
public class TestPostServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String name=request.getParameter("name");
String password=request.getParameter("password");
response.getWriter().print(name);
response.getWriter().print(password);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>POST</title>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function () {
$("#test").click(function () {
$.post("/TestPostServlet",{
name:$("#name").val(),
password:$("#password").val()
},function (data,status) {
$("#display").append("<b>data</b>"+data+"<br>");
$("#display").append("<b>status</b>"+status);
},"text"
);
});
});
</script>
</head>
<body>
<div id="wrapper">
<h1>jQuery Playground</h1>
<div id="content">
<button id="test">测试</button>
<form >
name:<input type="text" id="name" name="name" value=""><br>
password:<input type="password" id="password" name="password">
<input type="submit" id="submit" value="提交">
</form>
<h2>结果：</h2>
<div id="display"></div>
</div>
</div>
</body>
</html>
运行结果
测试界面
运行结果
四 总结
在Javaweb中，在使用jQuery中的AJAX GET/POST 方法时，对应的servlet 应设置对应的路径
设置路径
网友评论