• 中文
    • English
  • 注册
  • 查看作者
  • 5:JQuery的ajax请求

    一.  前言

    在之前项目里,我们删除一个数据需要跳转到一个结果页来显示删除是否成功,但在实际生活中我们却很少会采用这种方式。举个最常见的例子,比如我们将购物车的一个商品删除,或者修改商品的数量,又或者注册用户的时候,判断该用户名是否存在等等都是在当前页直接完成操作的,并没有刷新当前页或者跳转到其他的页面,这就用到了ajax请求。

    ajax 是一种与服务器交换数据的技术,可以在不重新载入整个页面的情况下更新网页的一部分内容。

    二.  JQuery ajax方法

    我们可以使用ajax() 方法用于执行 AJAX(异步 HTTP)请求,在该方法中通过{}传入一个对象,我们将会用到以下属性:

    • url:发送请求的 URL。默认是当前页面,

    • type:请求的类型,通常为post或者get

    • data :发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。

    • success(result,status,xhr):当请求成功时运行的函数

    其中data属性只有在type为post的时候才可能用到

    例一,首先我们通过Servlet将查询到的数据以JSON格式的字符串返回:

    package servlet;
    
    import com.alibaba.fastjson.JSON;
    import dao.BikeDao;
    import dao.impl.BikeDaoImpl;
    import entity.Bike;
    
    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 java.io.IOException;
    import java.io.PrintWriter;
    
    @WebServlet("/json")
    public class JSONServlet extends HttpServlet {
        private BikeDao bikeDao = new BikeDaoImpl();
        @Override
        protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            String id = req.getParameter("id");
            Bike bike = null;
            if(id != null) {
                bike = bikeDao.queryById(Integer.parseInt(id));
            }
            resp.setContentType("application/json; charset=utf-8");
            PrintWriter writer = resp.getWriter();
            writer.println(JSON.toJSONString(bike));
            writer.close();
    
        }
    }

    之前我们需要跳转到http://localhost:8888/svt/json?id=1才能获取到一辆单车的数据,现在便可以直接通过ajax来获取。

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
    <!DOCTYPE html>
    <html>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <%--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>--%>
    <script src="${pageContext.request.contextPath}/admin/jquery-1.8.3.min.js"></script>
    
    <head>
        <title>$Title$</title>
    </head>
    <script type="text/javascript">
        $(function () {
    
            $("button").click(function () {
                var id = $("input[name='bikeId']").val();
                alert(id);
                $.ajax({
                    url:"${pageContext.request.contextPath}/json?id="+id,
                    type:"get",
                    success:function (res) {
                        console.log(res);
                        console.log(res.type); //获取单车的类型
                    }
                });
            });
    
        });
    </script>
    <body>
    <input type="text" class="form-control" name="bikeId">
    <button>查询</button>
    </body>
    </html>

    success中的res就是我们获取到数据,在上面的例子中res就是一个JSON。另外因为我们在JSONServlet 中,设置了resp.setContentType(“application/json; charset=utf-8”);  所以ajax方法中的res的类型就是Object(可以通过typeof res 查看),所以可以直接用res.xxx来获取Bike对象的相关属性,如果我们将resp.setContentType设置text/html,那么ajax方法中的res类型就是String,则必须先使用JSON.parse(res)将其转换为js对象,才能通过res.type来获取单车的类型。

    例二,点击按钮后,直接将h1标签的内容修改为单车的类型

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
    <!DOCTYPE html>
    <html>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <%--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>--%>
    <script src="${pageContext.request.contextPath}/admin/jquery-1.8.3.min.js"></script>
    
    <head>
        <title>$Title$</title>
    </head>
    <script type="text/javascript">
        $(function () {
    
            $("button").click(function () {
                var id = $("input[name='bikeId']").val();
    
                $.ajax({
                    url:"${pageContext.request.contextPath}/json?id="+id,
                    type:"get",
                    success:function (res) {
                        $("h1").text(res.type);
                    }
                });
            });
    
        });
    </script>
    <body>
    <input type="text" class="form-control" name="bikeId">
    <button>查询</button>
    
    <h1>内容</h1>
    </body>
    </html>

    例三.  通过data将表单的数据发送到服务器

    Servlet

    package servlet;
    
    import com.alibaba.fastjson.JSON;
    import dao.BikeDao;
    import dao.impl.BikeDaoImpl;
    import entity.Bike;
    
    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 java.io.IOException;
    import java.io.PrintWriter;
    import java.net.URLDecoder;
    import java.net.URLEncoder;
    import java.util.HashMap;
    import java.util.Map;
    
    @WebServlet("/result")
    public class ResultServlet extends HttpServlet {
        private BikeDao bikedao = new BikeDaoImpl();
        @Override
        protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    
            req.setCharacterEncoding("utf-8");
    
            String types = req.getParameter("type");
            int locationId = Integer.parseInt(req.getParameter("location"));
            int status = Integer.parseInt(req.getParameter("status"));
            int amount = Integer.parseInt(req.getParameter("amount"));
    
            int i = -1;
    
            Bike bike = new Bike(types, locationId, locationId, status, amount, "");
            if(req.getParameter("id") == null) {
                i = bikedao.doInsert(bike);
            } else {
                Bike bike2 = bikedao.queryById(Integer.parseInt(req.getParameter("id")));
                bike.setId(Integer.parseInt(req.getParameter("id")));
                bike.setQr(bike2.getQr());
                bike.setDeleteStatus(bike2.getDeleteStatus());
                i = bikedao.doUpdate(bike);
            }
    
    //        req.setAttribute("i",i);
    //        //转发的时候不用写getcontextPath
    //        req.getRequestDispatcher("/admin/updateAndAddResult.jsp").forward(req,resp);
            resp.setContentType("application/json; charset=utf-8");
            Map<String,Object> map = new HashMap<>();
            map.put("result",i == 1);
            PrintWriter writer = resp.getWriter();
            writer.println(JSON.toJSONString(map));
            writer.close();
        }
    }

    因为不再是通过submit的方式提交数据,所以我们需要使用return false来阻止表单的默认提交

    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
    <!DOCTYPE html>
    <html>
    <head>
        <%
        request.setCharacterEncoding("utf-8");
    %>
        <c:if test="${param.id == null}">
            <title>添加单车</title>
        </c:if>
    
        <c:if test="${param.id != null}">
            <title>修改单车</title>
        </c:if>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    
        <style>
            .form-control {
    
                width: 200px !important;
    
            }
    
        </style>
    
        <script type="text/javascript">
            $(function () {
                $(":submit").click(function () {
                    var data = {
                        type:$("input[name='type']").val(),
                        location:$("input[name='location']").val(),
                        price:$("input[name='price']").val(),
                        status:$("input[name='status']").val(),
                        amount:$("input[name='amount']").val()
                    };
                    if(($("input[name='id']"))[0]) {
                    //直接data.id,如果此时data中有id,则是修改,如果没有,则是向data中添加id这个属性
                        data.id=$("input[name='id']").val();
                    }
                    $.ajax({
                        url:'${pageContext.request.contextPath}/result',
                        type:"post",
                        data:data,
                        success:function (res) {
                            if(res.result){
                                alert("成功");
                                location = "${pageContext.request.contextPath}/zhangjia"
                            } else {
                                alert("失败");
                            }
    
                        }
                    });
    
                    return false;
                });
            });
    
        </script>
    
    </head>
    <body>
    
    
    
    <c:if test="${param.id == null}">
        <h1>添加单车</h1>
    </c:if>
    
    <c:if test="${param.id != null}">
        <h1>修改单车</h1>
    </c:if>
    
    
    <form role="form" action="${pageContext.request.contextPath}/result" method="post" class="form">
    
        <c:if test="${!(empty param.id)}">
            <div class="form-group">
                <input type="hidden" class="form-control" id="id" value="${requestScope.bike.id}" name="id" placeholder="请输入名称">
            </div>
        </c:if>
    
    
    
        <div class="form-group">
            <label for="type">单车类型:</label>
            <input type="text" class="form-control" id="type" value="${requestScope.bike.type}" name="type"
                   placeholder="请输入名称">
        </div>
    
        <div class="form-group">
            <label for="location"> 单车位置:</label>
            <input type="text" class="form-control" id="location" value="${requestScope.bike.locationId}" name="location"
                   placeholder="请输入名称">
        </div>
    
        <div class="form-group">
            <label for="status"> 单车状态:</label>
            <input type="text" class="form-control" id="status" value="${requestScope.bike.status}" name="status"
                   placeholder="请输入名称">
        </div>
    
        <div class="form-group">
            <label for="amount">单车次数:</label>
            <input type="text" class="form-control" id="amount" value="${requestScope.bike.amount}" name="amount"
                   placeholder="请输入名称">
        </div>
        <input class="btn btn-primary" type="submit"/>
    </form>
    
    </body>
    </html>

    例四.  如果form中有多个参数,可以将data使用serialize序列化后放入data:

    $(":submit").click(function () {
        var data = $("form").serialize();
        $.ajax({
            url: '${pageContext.request.contextPath}/login',
            type: 'post',
            data:data,
            success: function (res) {
               
            ....
            }
        });
    
        return false;
    });

    参考资料

    菜鸟教程

    山东省
  • 0
  • 0
  • 0
  • 1.6k
  • 请登录之后再进行评论

    登录

    赞助本站

    • 支付宝
    • 微信
    • QQ

    感谢一直支持本站的所有人!

    单栏布局 侧栏位置: