我的 Servlet 端点返回 JSON，但我的 AXIOS 函数未运行并为我的网页获取它

Question

我有一个简单的 HTML 表单

<form action="#" method="get" id="thisForm">

       <button type="submit"> GetJSON </button>

</form>

这是我的 body 标签末尾部分的 javascript

<script src="https://unpkg.com/axios/dist/axios.min.js">

let form = document.getElementById("thisForm");

form.addEventListener('submit', servletAccess())

function servletAccess(e){

    e.preventDefault();

    console.log("im here")

    axios.get('http://localhost:8080/Project1/MyServlet')

    .then(function (response) {

      // handle success

      console.log(response);

    })

    .catch(function (error) {

      // handle error

      console.log(error);

    })

    .then(function () {

      console.log(response);

    });

}

    

</script>

这是我的 java servlet 返回 JSON

    JSONArray json = new JSONArray();

    

    JSONObject user = new JSONObject();

    user.put("name", "rous");

    user.put("age", 26);

    user.put("lname", "e");

    

    JSONObject user2 = new JSONObject();

    user.put("name", "rene");

    user.put("age", 28);

    user.put("lname", "solomon");

    

    json.put(user);

    json.put(user2);

    

    response.setContentType("application/json");

    response.getWriter().write(json.toString());

当通过 URL 直接访问我的端点时，我得到原始数据

[{"lname":"所罗门","name":"rene","age":28},{}]

所以我知道我的端点有效。

为什么我什至无法 console.log 响应？我的虚拟 console.log("im here") 甚至没有运行？

这可能很简单，但我坚持下去。

Answer 1

您的脚本标签指定了“src”以及内联javascript，当您像这样编写时，您的内联js将被忽略，因此您必须分隔这些脚本标签：<script src='path/to/axios/'></script><script>// register your form handler</script>还有这一行：form.addEventListener('submit', servletAccess())您将实际的函数调用注册为事件侦听器，而不应该是函数本身，如下所示：// notice no () at the end of function nameform.addEventListener('submit', servletAccess)