• 中文
    • English
  • 注册
  • 赞助本站

    • 支付宝
    • 微信
    • QQ

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

    • 查看作者
    • 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
    • 995
    • 请登录之后再进行评论

      登录
    • 做任务
    • 实时动态
    • 偏好设置
    • 返回顶部
    • 单栏布局 侧栏位置: