JQuery复习之JQuery Ajax

￡神魔★判官ぃ 2022-05-23 06:39 242阅读 0赞

#### 今日目录 ####

1、JqueryAjax 简介

2、JqueryAjax Load 方法

3、jqueryAjax Get/Post 方法

#### 一、JqueryAjax 简介 ####

Jquery 对 Ajax 操作封装了一套跨浏览器，方便用户使用的 Api；

#### 二、JqueryAjax Load 方法 ####

![70][]

#### 三、jqueryAjax Get/Post 方法 ####

![70 1][]

<!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>

package com.java1234.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();
    	}
    
    }

![70 2][]

![70 3][]

添加小编微信可以获取免费资源，二维码

![70 4][]

要用到的工具，关注 公众号直接免费获取：

![70 5][]

[70]: /images/20220523/1cf96f24547b49c2bcfdb4aca13f4c48.png
[70 1]: /images/20220523/e425ad9f47d84c8eabbc54598cab15c2.png
[70 2]: /images/20220523/68a3998bc7fb4f3d919b27f3bf217ee1.png
[70 3]: /images/20220523/da8d7277087a4daba06132631833324f.png
[70 4]: /images/20220523/b74f2ff01b3e4b1dbfa110ef8dae00fd.png
[70 5]: /images/20220523/4ecd799c045f4d6a990112827a67f6cf.png