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="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="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="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="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();
    }
}

Jquery实现Ajax（一）

相关推荐