Javascript 使用Vue从Web API获取数据

我有一个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>

{{content}}

你放在

方法中的任何东西：{}

都不会起作用 除非使用@单击元素调用

loadData（）

，或者在页面加载时调用

因此，您应该在元素上调用它，或者使用创建/装载方法：

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

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

---

要在页面加载中加载，可以执行以下操作：

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()
    }
});

$(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，因此要在加载页面时加载Vue，可以将代码更新为以下内容：

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()
    }
});

$(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')
        });
      }
    }
  });  
})

上述语法仅在加载页面后使用创建Vue

如果没有jQuery，您可能希望侦听事件

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

下面是一个完整的工作示例

console.clear（）
$（函数（）{
常数v=新Vue({
el:“#divContent”，
已创建：函数（）{
这是loadData（）；
},
数据：{
内容：“正在加载”，
服务器数据：空
},
方法：{
loadData:函数（viewerUserId、posterUserId）{
$.ajax({
contentType:“应用程序/json”，
数据类型：“json”，
url:“https://httpbin.org/post",
数据：JSON.stringify（{testing:“some value”}），
方法：“张贴”，
成功：响应=>{
this.content=“已加载”
this.serverData=response.json
},
错误：err=>console.log（'error'）
});
}
}
});  
})

{{content}}

答复：

{{serverData}}

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

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

• （）

这是

HTML 输出

---

我想在页面打开时加载数据loaded@DainaHodges然后在

方法之后添加
created（）{}
：{}

为什么不使用axios处理http请求？那就容易用了ajax@Thamerbelfkih如果有人已经在使用jQuery，为什么要使用axios，这只会增加膨胀。我对Vue不太了解，我是一个newbie@DakshMiglani对于Vue 2中的最佳实践和可维护代码，没有

ready

生命周期处理程序。它消失了，取而代之的是

挂载的
。在Vue 2中，对于这种情况，您可以使用
创建的
或
装载的
errors@DainaHodges现在检查，但您应该知道必须更新内容属性才能查看更改。不起作用：（是否有我可以从中学习的工作示例？您对
这个
@bert什么有疑问？您能详细说明吗？
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;
      });
    }
  }
});