Jquery实现Ajax（一）
一、$.ajax()方法实现Ajax
是jQuery最底层的实现，书写简洁，又不乏灵活性
下面直接来一段Ajax的代码，模拟从数据获取多个宠物信息的场景
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>使用$.ajax()方法实现Ajax</title> <style type="text/css"> div{ margin-top:10px; margin-bottom:10px; } </style> </head> <body> <div><input type="text" placeholder="请输入要发送到后台的值" id="flag"></div> <input type="submit" value="显示所有宠物信息" id="showButton"> <div > <h3 style="width:230px;border:1px red dashed;padding:5px;display:none;" align="left">后台拥有的宠物信息如下</h3> <table border="1" id="petShow"> <tr><td>宠物类别</td><td>宠物昵称</td><td>宠物年龄</td></tr> </table> </div> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript"> $("#showButton").click(function(){ var flag=$("#flag").val(); $.ajax({ "url" :"petServlet",//发送请求的地址 "type" :"POST",//发送什么请求， "data" :"opr="+flag,//请求中携带的数据 "dataType" :"JSON",//服务器返回数据的类型 "beforeSend":function(){//发送请求前调用的函数 alert("Ajax发送请求前函数被触发！"); $("h3").css("display","block"); }, "success" :callBack,//请求成功后调用的函数 "error" :function(){//请求失败后调用的函数 alert("获取宠物信息失败！"); }, "complete" :function(){//请求完成后调用的数据，不论成功与否 alert("Ajax请求已完成！"); } }) function callBack(data){ alert("返回请求数据"); $("#petShow").empty(); $("#petShow").append("<tr><td>宠物类别</td><td>宠物昵称</td><td>宠物年龄</td></tr>"); $petJson=$(data); $petJson.each(function(i){ $("#petShow").append("<tr><td>"+$petJson[i].strain+"</td><td>"+$petJson[i].nick+"</td><td>"+$petJson[i].age+"</td></tr>") }) } }) </script> </body> </html>
二、$.get()实现Ajax
如果要发送GET请求，在jQuery中提供了更简洁的代码来实现相应的效果
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>使用$.get()方法实现Ajax</title> <style type="text/css"> div{ margin-top:10px; margin-bottom:10px; } </style> </head> <body> <div><input type="text" value="nihao" id="flag"></div> <input type="submit" value="显示所有宠物信息" id="showButton"> <div> <h3 style="width:230px;border:1px red dashed;padding:5px;display:none;" align="left">后台拥有的宠物信息如下</h3> <table border="1" id="petShow"> <tr><td>宠物类别</td><td>宠物昵称</td><td>宠物年龄</td></tr> </table> </div> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript"> $("#showButton").click(function(){ var flag=$("#flag").val(); //$.get()方法实现Ajax $.get("petServlet","opr="+flag,callBack,"JSON"); //设置回调函数 function callBack(data){ alert("返回请求数据"); $("#petShow").empty(); $("#petShow").append("<tr><td>宠物类别</td><td>宠物昵称</td><td>宠物年龄</td></tr>"); $petJson=$(data); $petJson.each(function(i){ $("#petShow").append("<tr><td>"+$petJson[i].strain+"</td><td>"+$petJson[i].nick+"</td><td>"+$petJson[i].age+"</td></tr>") }) } /* $.get()方法等价于 $.ajax({ "url" :"petServlet", "data" :"opr="+flag, "type" :"GET", "dataType" :"JSON", "success" :callBack });*/ }) </script> </body> </html>
三、$.post()方法实现Ajax请求
如果要发送POST请求，那么以下代码可以实现上述效果
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>使用$.post()方法实现Ajax</title> <style type="text/css"> div{ margin-top:10px; margin-bottom:10px; } </style> </head> <body> <div><input type="text" placeholder="请输入要发送到后台的值" id="flag"></div> <input type="submit" value="显示所有宠物信息" id="showButton"> <div> <h3 style="width:230px;border:1px red dashed;padding:5px;display:none;" align="left">后台拥有的宠物信息如下</h3> <table border="1" id="petShow"> <tr><td>宠物类别</td><td>宠物昵称</td><td>宠物年龄</td></tr> </table> </div> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript"> $("#showButton").click(function(){ var flag=$("#flag").val(); //$.post()方法实现Ajax $.post("petServlet","opr="+flag,callBack,"JSON"); //设置回调函数 function callBack(data){ alert("返回请求数据"); $("#petShow").empty(); $("#petShow").append("<tr><td>宠物类别</td><td>宠物昵称</td><td>宠物年龄</td></tr>"); $petJson=$(data); $petJson.each(function(i){ $("#petShow").append("<tr><td>"+$petJson[i].strain+"</td><td>"+$petJson[i].nick+"</td><td>"+$petJson[i].age+"</td></tr>") }) } /* $.post()方法等价于 $.ajax({ "url" :"petServlet", "data" :"opr="+flag, "type" :"POST", "dataType" :"JSON", "success" :callBack });*/ }) </script> </body> </html>
四、$getJSON()方法实现Ajax
顾名思义，这是个用于Ajax发送GET请求，并且从服务器来返回JSON格式数据的方法
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>使用$.getJSON()方法实现Ajax</title> <style type="text/css"> div{ margin-top:10px; margin-bottom:10px; } </style> </head> <body> <div><input type="text" placeholder="请输入要发送到后台的值" id="flag"></div> <input type="submit" value="显示所有宠物信息" id="showButton"> <div> <h3 style="width:230px;border:1px red dashed;padding:5px;display:none;" align="left">后台拥有的宠物信息如下</h3> <table border="1" id="petShow"> <tr><td>宠物类别</td><td>宠物昵称</td><td>宠物年龄</td></tr> </table> </div> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript"> $("#showButton").click(function(){ var flag=$("#flag").val(); //$.getJSON()方法实现Ajax $.getJSON("petServlet","opr="+flag,callBack); //设置回调函数 function callBack(data){ alert("返回请求数据"); $("#petShow").empty(); $("#petShow").append("<tr><td>宠物类别</td><td>宠物昵称</td><td>宠物年龄</td></tr>"); $petJson=$(data); $petJson.each(function(i){ $("#petShow").append("<tr><td>"+$petJson[i].strain+"</td><td>"+$petJson[i].nick+"</td><td>"+$petJson[i].age+"</td></tr>") }) } /* $.getJSON()方法等价于 $.ajax({ "url" :"petServlet", "data" :"opr="+flag, "type" :"GET", "dataType" :"JSON", "success" :callBack });*/ }) </script> </body> </html>
五、下面展示一下以上Ajax访问的servle页面
package com.vic.controller; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.google.gson.Gson; import com.vic.entity.Pet; @WebServlet("/petServlet") public class PetServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("进入了doGet方法"); doPost(req, resp); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { System.out.println("执行doPost方法"); String opr=req.getParameter("opr");//获得Ajax携带的数据 System.out.println(opr);//打印接收到的参数到控制台 /** * 模拟后台数据 */ List<Pet> pets=new ArrayList<Pet>(); Pet pet1=new Pet("牧羊犬", "小黑", 2); Pet pet2=new Pet("波斯猫", "小花", 1); Pet pet3=new Pet("北极熊", "小白", 3); pets.add(pet1); pets.add(pet2); pets.add(pet3); //将数据转换为json格式 Gson gson=new Gson(); String json=gson.toJson(pets); System.out.println(json);//打印json里的内容到控制台 //设置返回编码 resp.setHeader("Content-type", "text/html;charset=utf-8"); //将数据返回到前台 PrintWriter out=resp.getWriter(); out.println(json); out.flush(); out.close(); } }
