Jquery Ajax
程序员文章站
2022-07-16 08:50:30
...
1. Jquery Ajax简介
2. Jquery Ajax Load方法
3. jquery Ajax Get/Post方法
Jquery对Ajax操作封装了一套跨浏览器，方便用户使用的Api
2. Jquery Ajax Load方法
远程请求，把请求的数据载入到DOM里； load(url , [,data] , [,callback]) Url:请求地址 Data:请求参数 Callback:请求完成后的回调方法
3. jquery Ajax Get/Post方法
Ajax请求后台； $.post(URL,data,callback); Url:请求地址 Data:请求参数 Callback:请求完成后的回调方法
chap06/demo01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b1").click(function(){
$("#d1").load("/HeadFirstJquery/ajax?action=load",{name:"张三",age:14},function(){
alert("执行完成");
});
});
$("#b2").click(function(){
$.post("/HeadFirstJquery/ajax?action=post",{id:1},function(data,textStatus){
alert("请求状态："+textStatus);
alert("返回数据："+data);
data=eval("("+data+")");
$("#name").val(data.name);
$("#age").val(data.age);
});
});
});
</script>
</head>
<body>
<input id="b1" type="button" value="Load加载"/>
<div id="d1"></div>
<hr/>
<input id="b2" type="button" value="Post/Get加载"/><br/>
姓名：<input type="text" id="name"/><br/>
年龄：<input type="text" id="age"/>
</body>
</html>
Web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns="http://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
<display-name>HeadFirstJquery</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>ajaxServlet</servlet-name>
<servlet-class>com.andrew.web.AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ajaxServlet</servlet-name>
<url-pattern>/ajax</url-pattern>
</servlet-mapping>
</web-app>
AjaxServlet.java
package com.andrew.web;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
String action = request.getParameter("action");
if ("load".equals(action)) {
this.load(request, response);
} else if ("post".equals(action)) {
this.post(request, response);
}
}
private void load(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String name = request.getParameter("name");
String age = request.getParameter("age");
System.out.println("name:" + name);
System.out.println("age:" + age);
PrintWriter out = response.getWriter();
out.println("jquery Ajax 大爷你好");
out.flush();
out.close();
}
private void post(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
String id = request.getParameter("id");
System.out.println("id:" + id);
PrintWriter out = response.getWriter();
out.println("{name:'张三',age:14}");
out.flush();
out.close();
}
}
http://localhost:8080/HeadFirstJquery/chap06/demo01.html