求解为什么我用jQuery优化下的Ajax进行局部刷新操作时前端接收不到数据？

问题描述：

以下为我的代码，

1、servlet中的doGet方法：

protected void doGet(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
        Student s1 = new Student("马迪", 27);
        Student s2 = new Student("王子琦", 26);
       
        String str = "{\"s1\":{\"name\":\""+s1.getName()
                +"\",\"age\":"+s1.getAge()
                +"},\"s2\":{\"name\":\"\",\"age\":"+s2.getAge()+",\"sex\":"+"}}";  //用json传递参数

        PrintWriter pw = response.getWriter();
        pw.println(str);
        pw.flush();
        pw.close();
    }

2、web.xml配置文件

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    <servlet>
        <servlet-name>Servlet</servlet-name>
        <servlet-class>com.bjpowernode.controller.Servlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>Servlet</servlet-name>
        <url-pattern>/JsonServlet</url-pattern>
    </servlet-mapping>
</web-app>

3、前端jsp文件

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <script type="text/javascript"></script>
    <script src="js/jquery-3.4.1.js">
      $(function () {
        $("#myJson").click(function () {
          $.ajax({
            url:"JsonServlet",
            type:"get",
            dataType:"json",
            success:function (data) {
              $("#name1").html(data.s1.id);
              $("#age1").html(data.s1.age);

              $("#name2").html(data.s2.id);
              $("#age2").html(data.s2.age);
            }
          })
        })
      })
    </script>
    <title>json</title>

  </head>
  <body>
    <button id="myJson">点击</button>
    <br>
    <br>
    <br>
    学员1：<br>
    姓名：<span id="name1"></span><br>
    年龄：<span id="age1"></span><br>

    <br>
    <br>
    学员2：<br>
    姓名：<span id="name2"></span><br>
    年龄：<span id="age2"></span><br>

  </body>
</html>

以上是我的代码，最后在网页上的效果就是点按钮没反应

调后台信息显示一个404报错，不知是何原因，求解！！

答

哪有你这样写的呀，你的点击事件都执行不了吧？点击无效果，你的404只是图标有问题，不影响程序，你真正有问题的是你的jquery写错地方啦，一个声明用来引用jquery,一个用来写jquery

真正应该是这样写的


<script src="js/jquery-3.4.1.js">
  </script>
  <script type="text/javascript">
    $(function () {
      $("#myJson").click(function () {
        $.ajax({
          url:"JsonServlet",
          type:"get",
          dataType: 'json',
          success:function (data) {
            console.log(data);
            $("#name1").html(data.s1.name);
            $("#age1").html(data.s1.age);
            $("#name2").html(data.s2.name);
            $("#age2").html(data.s2.age);
          }
        })
      })
    })
  </script>

还有你的数据都不是json，你仔细看看，很多地方都错了还没写对，比如性别虽然没有，但你至少给它赋值为空字符串啊，s2的名字你也没有写。。。这是我给你改的

 protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        Student s1 = new Student("madi", 27);
        Student s2 = new Student("lala", 26);

        String str = "{\"s1\":{\"name\":\""+s1.getName()
                +"\",\"age\":"+s1.getAge()
                +"},\"s2\":{\"name\":\""+s2.getName()+"\",\"age\":"+s2.getAge()+",\"sex\":"+"\"\"}}";  //用json传递参数

        PrintWriter pw = resp.getWriter();
        pw.println(str);
        pw.flush();
        pw.close();
    }

演示结果

答

JsonServlet路径不对，最好是使用绝对路径，或者加个斜杠/试试。

答

点击按钮后，按F12查看控制台有没有输出什么错误。你后面说的那个404问题没事的，只是一个ico图标问题，不影响。
路径可以加/，或者按照我如下的格式试试：

<a href="<%=getServletContext().getContextPath() %>/DownloadServlet1111?filename=flag.png">文件下载</a>

求解为什么我用jQuery优化下的Ajax进行局部刷新操作时前端接收不到数据？

相关推荐