Jquery<6>Jquery Ajax-优快云博客

本文链接：https://blog.youkuaiyun.com/wicycc/article/details/42202239

本文详细介绍了Jquery对Ajax操作的封装方法，包括JqueryAjaxLoad与JqueryAjaxGet/Post方法，并通过demo01.html展示了如何使用这些方法进行远程请求与数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JqueryAjax 简介

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

JqueryAjax Load 方法

远程请求，把请求的数据载入到 DOM 里；
load( url , [,data] , [,callback])
Url：请求地址
Data:请求参数
Callback:请求完成后的回调方法

jqueryAjax Get/Post 方法

Ajax 请求后台；
$.post(URL,data,callback);
Url：请求地址
Data:请求参数
Callback:请求完成后的回调方法

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("/Jquery/ajax?action=load",{name:"张三",age:14},function(){
				alert("执行完成");
			});
		});
		
		$("#b2").click(function(){
			$.post("/Jquery/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>

AjaxServlet.java

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

}

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>Jquery</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
  	<servlet-name>ajaxServlet</servlet-name>
  	<servlet-class>com.cc.web.AjaxServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>ajaxServlet</servlet-name>
  	<url-pattern>/ajax</url-pattern>
  </servlet-mapping>
</web-app>