Question

我正在使用一个JSP页面，该页面从数据库表中获取数据，并通过GSON将其转换为JSON字符串。然后，该JSON通过Axios提取到客户端，并且数据显示在网页上。

问题是，尽管JSP可以根据从数据库表中获取的数据成功创建JSON字符串（从Eclipse IDE控制台可以明显看出），但是我无法将JSON数据获取到网页。我也在浏览器的控制台窗口中看到了TypeError: handler.call is not a function at invokeWithErrorHandling和[Vue warn]: Error in mounted hook: "TypeError: handler.call is not a function" (found in <Root>)。

这是负责创建JSON字符串（数组？）的JSP：

while(rs.next()) {
    currUser.setName(rs.getString("name"));
    currUser.setDob(rs.getString("dob"));
    currUser.setEmail(rs.getString("email"));
    currUser.setCity(rs.getString("city"));
    currUser.setState(rs.getString("state"));
    currUser.setReqCount(rs.getInt("reqcount"));
    currUser.setPostCount(rs.getInt("postcount"));
}

String reqCount = new String();
reqCount.valueOf(currUser.getReqCount());

String postCount = new String();
reqCount.valueOf(currUser.getPostCount());

final ArrayList<String> user= new ArrayList<String>();
user.add(currUser.getName());
user.add(currUser.getDob());
user.add(currUser.getCity());
user.add(currUser.getState());
user.add(reqCount);
user.add(postCount);

Gson gson = new Gson();
String json = gson.toJson(user);
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
response.getWriter().write(json);
response.sendRedirect("profile.html");

以下是应该显示JSON数据的HTML代码：

<div v-for="items in profile">
    <p><strong>Name: <br /> {{profile.name}}</strong></p>
    <p>Date of Birth: {{profile.dob}}</p>
    <p>City: {{profile.city}}</p>
    <p>State: {{profile.state}}</p>
    <p>Volunteers requested: {{profile.postcount}} times</p>
    <p>Volunteered: {{profile.reqcount}} times</p>
</div>

这是JavaScript：

new Vue({
    el: '#main',

    data: {
        profile: [],
        name: '',
        dateOfBirth: '',
        state: '',
        city: '',
    },

    computed: {
        getProfileData: function () {
            axios.get("B_test.jsp")
            .then((response) => {
              this.profile = response.data.value;
            })
        }
    },
})

main ID已在代码中进一步定义，因此我知道我为Vue提供了一个可安装的元素。我还通过CDN以及Vue的CDN导入了Axios API。

上面的代码没有显示页面中div的任何内容，理论上它应该显示JSON中的数据（可能是因为computed钩没有计算内容）以及上述两个警告

对于任何潜在的菜鸟错误表示歉意，希望您能和我这样的初学者一起接受。

Answer 1

首先，我认为您对v-for的使用不正确...按照https://vuejs.org/v2/guide/list.html和此示例：

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

我认为您应该说v-for =“项目中的配置文件”而不是“项目中的项目”。至于get（），您可能有一个类似的问题，我最近遇到了类似的方法（fetch（））正在返回我在尝试使用之前必须等待的承诺...所以也许当您这样做时：

    .then((response) => {
      this.profile = response.data.value;
    })

您确定response.data立即可用吗？也许服务器需要一些时间来回答，并且代码已经在尝试分配response.data.value，但尚未准备好。解决fetch（）属性的问题的方式是添加等待两个promise，一个用于主要响应，另一个用于响应主体。也许是相关的：

fetch(...)
.then ( response => Promise.all([response,response.json()]) )
.then ( ([response,body]) => { ... } )

如何在Vue.js中使用Axios从jsp页面获取JSON？

1 个答案: