vue.js的ajax和jsonp请求

最新推荐文章于 2025-06-22 15:24:03 发布

chenbalala

最新推荐文章于 2025-06-22 15:24:03 发布

阅读量2.1w

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： vue.js json jsonp ht

本文链接：https://blog.youkuaiyun.com/chenbalala/article/details/53032429

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在Vue.js中使用$http进行数据请求，并通过实例演示了get和jsonp请求的方法及响应处理。同时展示了如何在HTML中绑定数据并监听输入事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入vue.js
<script src="vue.js"></script>
引入vue插件
<script src="vue-resource.js"></script>
html代码
<div id="v">
  <span>{{txt}}</span>
  <input type="text"  v-on:keyup.enter="init(55)" v-model="txt">
  <input type="button"  v-on:click="cli(55)">
</div>
js代码

<pre name="code" class="javascript">//全局使用（已get请求为例）
Vue.http.get(url, [options]).then(successCallback, errorCallback);

//在Vue实例类使用
this.$http.get(url, [options]).then(successCallback, errorCallback);

var test = new  Vue({
  el:'#v',
  data:{
    jsonUrl:'xxxx',
    jsonpUrl:'xxxxx',
    req:{}
    resData:[]
  },
  mthods:{
    init:function(id){
      this.$http.get(this.jsonUrl,this.req).then(function(res){
        console.log(res);
        this.$set('resData',res);
      },function(res){
        console.warn(res);
      })
    },
    cli:function(id){
      //jsonp请求
      this.$http.jsonp(this.jsonpUrl).then(
        function(res){
          console.log(res);
          this.$set('resData',res);
        }
      )
    }
  }
})

//需要注意的是jsonp请求的服务端返回的数据格式有些不一样，下面以php为例

$call = $_GET['callback'];
$json = json_encode(['data'=>'tttttt']);
echo $call.'('.$json.')';