如何使用 VueJS 获取 json Web API 的值

Posted 2023-02-22

【中文标题】如何使用 VueJS 获取 json Web API 的值

【英文标题】：How to get value of json web API using VueJS

【发布时间】：2019-08-06 12:09:07

【问题描述】：

我是 Vue.JS 的新手。实际上我正在尝试通过输入路由号码来获取银行名称。

API：https://www.routingnumbers.info/api/name.json?rn=011103093

export default 
        data: function () 

            return 
                picker: new Date().toISOString().substr(0, 7),
                resultsArray: 
                    'name' : '',
                    'message' : '',
                    'code' : '',
                    'rn' : ''
                ,
         
     
   

methods: 
           /* searchBasedOnMonthAndType() 
                let app = this;
                app.modeldailog = false
                app.rows = [];
                app.renderInvoicesBasedOnMonth(app.picker);
            ,*/

            getBankName() 
                let app = this;
                app.rows = [];
                var rn = '011103093';
                $.ajax(
                    url: 'https://www.routingnumbers.info/api/name.json?rn=' + rn,
                    success(res) 
                        if (res.results != null) 
                            app.resultsArray = res.results;
                         else 
                            // console.log(app.resultsArray);
                            // console.log("test after");
                            alert("data not fetched");
                        


                    

                );
            ,


<label>Routing Number</label>
 <input type="text" name="routingNo" v-validate="'required|numeric'"  v-model="paymentinfo.routing_no" class="form-control input-sm" v-on:keyup="getBankName();">

<label>Bank Name</label>
<input type="text" name="chck_bank_name" v-validate="'required'" class="form-control input-sm" v-bind:value="resultsArray.name">

我的 Ajax 响应为空。每次其他部分都在执行。

【参考方案1】：

也许你在 $.ajax 方法的选项中打错了。试试这个：

getBankName() 
  let app = this;
  app.rows = [];
  var rn = '011103093';
  $.ajax(
    url: 'https://www.routingnumbers.info/api/name.json?rn=' + rn,
    success: (res) => 
      if (res != null) 
        app.resultsArray = res;
       else 
         // console.log(app.resultsArray);
         // console.log("test after");
        alert("data not fetched");
      
    
  );
,

仅供参考：该 api 调用的结果不是数组。是这样的：

"name": "TD BANK NA", "message": "OK", "code": 200, "rn": "011103093"

【参考方案2】：

看起来你应该使用这样的东西：

$.ajax(...).done(data => 
  console.log(data)
).fail(() => 
  console.log('fail')
)

附：最好使用const vm = this; 而不是let app = this;。它是 Vue.js 中事实上的标准