Question

我有一个Web API，我试图通过使用Vue从中获取JSON数据，但我既没有数据也没有错误，所以我没有错。我想在加载页面时加载数据。

这是我的代码：

const v = new Vue({
    el: '#divContent',
    ready: function () {
        this.loadData();
    },
    data: {
        content: 'loading',
        serverData: null
    },
    methods: {
        loadData: function (viewerUserId, posterUserId) {
            const that = this;
            $.ajax({
                contentType: "application/json",
                dataType: "json",
                url: "http://my-webapi/",
                method: "Post",
                success: function (response) {                        
                    that.$data.serverData = response;

                },
                error: function () {
                    alert('Error')
                }
            });
        }
    }
});

我的HTML

<div id="divContent" class="content">
 {{ content }}
</div>

Answer 1

您似乎已经在使用jQuery，因此要在加载页面时加载Vue，您可以将代码更新为以下内容：

$(function(){
  const v = new Vue({
    el: '#divContent',
    created: function () {
      this.loadData();
    },
    data: {
      content: 'loading',
      serverData: null
    },
    methods: {
      loadData: function (viewerUserId, posterUserId) {
        const that = this;
        $.ajax({
          contentType: "application/json",
          dataType: "json",
          url: "http://my-webapi/",
          method: "Post",
          success: response => this.serverData = response,
          error: err => alert('Error')
        });
      }
    }
  });  
})

上面的语法仅在页面加载后使用jQuery.ready shorthand创建Vue。

如果没有jQuery，您可能希望收听DOMContentLoaded事件。

或者，只需在页面的底部处加载创建Vue的脚本，而不是在标题中。

这是一个完整的，有效的例子。

＆＃13;

console.clear()

$(function(){
  const v = new Vue({
    el: '#divContent',
    created: function () {
      this.loadData();
    },
    data: {
      content: 'loading',
      serverData: null
    },
    methods: {
      loadData: function (viewerUserId, posterUserId) {
        $.ajax({
          contentType: "application/json",
          dataType: "json",
          url: "https://httpbin.org/post",
          data: JSON.stringify({testing: "some value"}),
          method: "Post",
          success: response => {
            this.content = "loaded"
            this.serverData = response.json
          },
          error: err => console.log('Error')
        });
      }
    }
  });  
})

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<div id="divContent" class="content">
  {{ content }}
  <hr>
  Response: <br>
  {{ serverData }}
</div>

＆＃13;

Answer 2

您在methods: {}内放置的任何内容都无效除非您使用@click对元素或页面加载时调用loadData()。

因此，您应该在元素上调用它或使用created / mount方法：

所以，在你的情况下要么这样做。

<div id="divContent" class="content" @click='loadData'>

或在页面加载时调用方法：

created () {
 this.loadData()
}

Answer 3

是的，您可以使用jQuery的$ .ajax（）API。但是，不推荐使用jQuery来进行Ajax调用。你不想仅仅为了使用Ajax而包含整个jQuery库，对吗？： - ）

对于Vue.js，您有很多使用Ajax的选项，例如：

Axios
vue-resource
Browser's built-in fetch API（Using fetch）

这是an example of using the Browser's fetch API。

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>  
</head>
<body>
  <div id="divContent">
    <h1>Article Search Results</h1>
    <form v-on:submit.prevent="search">
      <input type="text" v-model="query">
      <button type="submit">Search</button>
    </form>

    <ul>
    <li v-for="article in articles" v-bind:key="article.source + article.id">
      {{ article.title }}
    </li>
    </ul>
  </div>
</body>
</html>

的JavaScript

const vm = new Vue({
  el: '#divContent',
  data() {
    return {
      query: 'gene',
      articles: 'loading'
    }
  },
  created() {
    this.search();
  },
  methods: {
    search: function () {
      fetch(`https://www.ebi.ac.uk/europepmc/webservices/rest/search?query=${this.query}&format=json`)
        .then(response => response.json())
        .then(json => {
          this.articles = json.resultList.result;
      });
    }
  }
});

输出

Answer 4

要在页面加载时加载它，您可以执行以下操作：

const v = new Vue({
    el: '#divContent',
    data: {
        content: 'loading',
        serverData: null
    },
    methods: {
        loadData(viewerUserId, posterUserId) {
            $.ajax({
                contentType: "application/json",
                dataType: "json",
                url: "http://my-webapi/",
                method: "POST",
                success: function (response) { 
                    this.content = 'loaded';                       
                    this.serverData = response;

                },
                error: function () {
                    alert('Error')
                }
            });
        }
    },
    mounted() {
       this.loadData()
    }
});

使用Web API中的Vue获取数据

4 个答案:

HTML

的JavaScript

输出