Jquery<6>Jquery Ajax

来源：互联网发布：域名代理商哪个好编辑：程序博客网时间：2024/06/06 03:16

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;@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {this.doPost(request, response);}@Overrideprotected 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>

0 0