Jquery Ajax简介：
Jquery Ajax操作封装了一套跨浏览器，方便用户使用的Api；
Jquery Ajax Load方法:
远程请求，把请求的数据载入到DOM里；
load( Url, [,data], [,callback] )
Url:请求地址
data:请求数据
callback:请求完成后的回调方法
Jquery Ajax Get/Post方法:
Ajax请求后台
$.post( URL, data, Callback);
url : 请求地址
data： 请求参数
callback： 请求完成后的回调方法
demo01.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Jquery操作DOM节点</title> 6 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script> 7 <script type="text/javascript"> 8 ????$(document).ready(function(){ 9 ????????$("#b1").click(function (){10 ????????????$("#d1").load("/HeadFirstJquery/Ajax?action=load",{name:"张三",age:14},function(){11 ????????????????alert("执行完成！");12 ????????????});13 ????????})14 ????????$("#b2").click(function(){15 ????????????$.post("/HeadFirstJquery/Ajax?action=post",{id:1},function(data,textStatus){16 ????????????????alert("请求状态: "+textStatus);17 ????????????????alert("返回数据: "+data);18 ????????????????data=eval("("+data+")");19 ????????????????$("#d2").val(data.name);20 ????????????????$("#d3").val(data.age);21 ????????????})22 ????????});23 ????});24 </script>25 </head>26 <body>27 <input id="b1" type="button" name="b1" value="Ajax加载信息"/>28 <div id="d1"></div>29 <br/>30 <hr/>31 <input id="b2" type="button" name="b2" value="Jquery.Post/get方法"/>32 <br/>33 姓名：<input id="d2" type="text" name="d2" /><br/>34 年龄：<input id="d3" type="text" name="d3"/>35 </body>36 </html>com.java1234.web.AjaxServlet.java
1 package com.java1234.web; 2 ?3 import java.io.IOException; 4 import java.io.PrintWriter; 5 ?6 import javax.servlet.ServletException; 7 import javax.servlet.http.HttpServlet; 8 import javax.servlet.http.HttpServletRequest; 9 import javax.servlet.http.HttpServletResponse;10 11 public class AjaxServlet extends HttpServlet{12 13 ????/**14 ?????* 15 ?????*/16 ????private static final long serialVersionUID = 1L;17 18 ????@Override19 ????protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {20 ????????// TODO Auto-generated method stub21 ????????this.doPost(request, response);22 ????}23 24 ????@Override25 ????protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {26 ????????// TODO Auto-generated method stub27 ????????response.setCharacterEncoding("utf-8");28 ????????String action=request.getParameter("action");29 ????????if("load".equals(action)){30 ????????????this.load(request,response);31 ????????}else if("post".equals(action)){32 ????????????this.post(request, response);33 ????????}34 ????}35 36 ????private void load(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {37 ????????// TODO Auto-generated method stub38 ????????response.setContentType("text/html;charset=utf-8");39 ????????response.setCharacterEncoding("utf-8");40 ????????PrintWriter out=response.getWriter();41 ????????String name=request.getParameter("name");42 ????????String age=request.getParameter("age");43 ????????System.out.println("name = "+name +" age = "+age);44 ????????System.out.println("{name:‘张三‘,age:18}");45 ????????out.println("AJax大爷你好啊");46 ????????out.flush();47 ????????out.close();48 ????}49 ????private void post(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {50 ????????// TODO Auto-generated method stub51 ????????response.setContentType("text/html;charset=utf-8");52 ????????response.setCharacterEncoding("utf-8");53 ????????PrintWriter out=response.getWriter();54 ????????String id=request.getParameter("id");55 ????????System.out.println("id="+id);56 ????????out.println("{name:‘张三‘,age:18}");57 ????????out.flush();58 ????????out.close();59 ????}60 }web.xml
1 <?xml version="1.0" encoding="UTF-8"?> 2 <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"> 3 ??<display-name>HeadFirstJquery</display-name> 4 ??<welcome-file-list> 5 ????<welcome-file>index.html</welcome-file> 6 ????<welcome-file>index.htm</welcome-file> 7 ????<welcome-file>index.jsp</welcome-file> 8 ????<welcome-file>default.html</welcome-file> 9 ????<welcome-file>default.htm</welcome-file>10 ????<welcome-file>default.jsp</welcome-file>11 ??</welcome-file-list>12 ??<servlet>13 ??????<servlet-name>AjaxServlet</servlet-name>14 ??????<servlet-class>com.java1234.web.AjaxServlet</servlet-class>15 ??</servlet>16 ??<servlet-mapping>17 ??????<servlet-name>AjaxServlet</servlet-name>18 ??????<url-pattern>/Ajax</url-pattern>19 ??</servlet-mapping>20 </web-app>
Jquery ?Ajax
原文地址：https://www.cnblogs.com/zyxsblogs/p/10090453.html