一、。load()方法实现Ajax
jQuery还封装的一种方法直接在标签中加载html文件
<%@ 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>.load()方法实现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="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(); //.load()方法实现Ajax $("#petShow").load("petListServlet","opr="+flag) // 上面的操作相当于执行了以下的代码 /* $.get("petListServlet","opr="+flag,function(data){ $("#petShow").html(data);}) */ //也相当于下列代码 /* $.ajax({ "url" :"petListServlet", "data" :"opr="+flag, "type" :"GET", "dataType" :"html", "success" :function(data){ $("#petShow").html(data); } }); */ }) </script> </body> </html>
servlet的实现代码如下
package com.vic.controller; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.Iterator; 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.alibaba.fastjson.JSON; import com.alibaba.fastjson.serializer.SerializerFeature; import com.vic.entity.Pet; @SuppressWarnings("serial") @WebServlet("/petListServlet") public class PetListServlet 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); //将宠物列表封装到html文档中 Iterator<Pet> items=pets.iterator(); StringBuffer petHtml=new StringBuffer(); petHtml.append("<tr><td>宠物类别</td><td>宠物昵称</td><td>宠物年龄</td></tr>"); while(items.hasNext()) { Pet pet= items.next(); petHtml.append("<tr><td>").append(pet.getStrain()).append("</td>"); petHtml.append("<td>").append(pet.getNick()).append("</td>"); petHtml.append("<td>").append(pet.getAge()).append("</td></tr>"); } System.out.println(petHtml);//打印html里的内容到控制台 //设置返回编码 resp.setHeader("Content-type", "text/html;charset=utf-8"); //将数据返回到前台 PrintWriter out=resp.getWriter(); out.println(petHtml); out.flush(); out.close(); } }