Jquery实现Ajax（二）

一、。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();
    }
}

Jquery实现Ajax（二）

相关推荐