使用jquery的getJSON方法改变了js的执行顺序，代码如下 var h = g.creatDIV(e.url); console.log(h);

Posted 2023-05-11

creatDIV:function(t)
var li='';
$.getJSON(t,function(data) t//是传入的url地址
$.each(data,function(x,y)
li+=y.title;//title是json字段
);
);
return li;


从逻辑上说h的值应该是return li 回传回来的值，但是执行的时候先执行了console.log(h);，然后才会执行return li，不知道为什么，请高手帮忙解释一下，教我如何做才能按照逻辑上执行，getJSON的方法必须是单独的函数，因为有很多地方要用到这个函数，谢谢啦！！！

ajax请求默认是异步的。

var h = g.creatDIV(e.url); console.log(h);

你g.creatDIV方法中。返回的li永远是空字符串。因为.getJSON正在执行的过程中，你的li就已经返回了。

解决方法两种，一种是使用同步请求，即ajax的执行会阻塞代码的继续执行。

$.ajax(
   type: "POST",
   url: t,
   data: "",
   async: false,
   dataType:"json",
   success: function(data)
     li+=y.title;
   
);

这样之后，后面的return li;

会等待请求结束，然后才会返回li

另一种解决方案是把你后续要执行的代码放到回调函数中执行。

creatDIV:function(t,cb)
            var li=\'\';
            $.getJSON(t,function(data)      //t是传入的url地址
                $.each(data,function(x,y)
                    li+=y.title;//title是json字段
                    cb(li);
                );  
            );
        
var h = g.creatDIV(e.url,function(li)
 alert("调用结束@! li的值是：" + li);
);

参考技术A 你的 return 是写在 ajax 外面的，当函数执行，ajax 发出请求尚未结束的时候就已经 return 了。

cainiaokan 是正解，不过这正方法和直接调用 ajax 没有什么区别，都要等 ajax 结束才能操作。

async:false 也是一种办法，但 jQuery 官方非常不建议这样做，因为 async:false 会在 ajax 同时锁定浏览器，一切活动必须等待 ajax 结束才能继续。

Setting this option to false (and thus making the call no longer asynchronous) is strongly discouraged, as it can cause the browser to become unresponsive.追问

return li放到each里还是会出现同样的问题

参考技术B $.ajaxSetup(
async:false

)

使用 jQuery $.getJSON() 从 Vuejs 方法中的本地 json 文件获取数据

【中文标题】使用 jQuery $.getJSON() 从 Vuejs 方法中的本地 json 文件获取数据

【英文标题】：Get data from local json file in Vuejs method using jQuery $.getJSON()

【发布时间】：2018-10-24 19:45:37

【问题描述】：

我正在使用 Vuejs 开发一个演示应用程序，作为其中的一部分，我需要从本地 .json 文件中获取一些地图数据，获取其中的某些部分（例如 lat/long 值），然后将其放入适当的数据对象中，以便它们可以显示在地图上。经过大量搜索后，它似乎是使用 jQuery 的 $.getJSON() 方法的最简单方法。但是，我不知道如何从 $.getJSON 回调中获取数据到我的 Vue markers 对象。

这是我的相关代码：

<script>
import _ from 'lodash'
import $ from 'jquery'

export default 
  name: 'HelloWorld',
  data () 
    return 
      center: lat: 37.541885, lng: -77.440624,
      markers: []
    
  ,
  methods: 
    getMarkers: function () 
      var apparatus = 
      var address = []
      var description = 
      $.getJSON('../static/event1.json', function (data) 
        // What do I do here to get outside of this function so
        // I can manipulate it?
        apparatus = data.apparatus
        address = data.address
        description = data.description
      )
    
  ,
  created () 
    this.getMarkers()
  

</script>

正如您在上面的评论中看到的那样，我需要从$.getJSON 回调中获取数据，但我看不出我需要做什么。这种方法行得通，还是有更好的方法？

【参考方案1】：

我认为您正在寻找一种在方法中使用数据对象的方法。您可以使用this 来访问您的数据对象的：

this.markers = data;

更新：

在您的情况下，您的方法中有另一个范围（您的回调），因此您需要使用 View Model。在你的 getJSON 行之前，像这样定义它：

var vm = this;

然后在你的回调中，你可以访问你的数据对象：

vm.markers = data;

注意，如果你使用的是旧版本的 vue（低于 2.x），你需要像这样使用它：

this.$data.markers = data;

【讨论】：

当我查看 $.getJSON 回调中的 this 时，它是 jQuery 对象，而不是 Vue 组件。

所以你的方法（你的回调）中有一个范围，那么你需要使用视图模型。在你的 getJSON 之前，定义 var vm = this;并在你的回调中使用它。我会更新答案

【参考方案2】：

我不确定你想在函数之外的哪里访问它。 例如，您可以通过self.data = data 将$.getJSON 的结果分配给Vue 的实例数据，然后您可以在$.getJSON 之外访问它

export default 
  name: 'HelloWorld',
  data () 
    return 
      center: lat: 37.541885, lng: -77.440624,
      markers: [],
      data: null
    
  ,
  methods: 
    getMarkers: function () 
      var apparatus = 
      var address = []
      var description = 
      var self = this
      $.getJSON('../static/event1.json', function (data) 
        self.data = data // then you can access data outside of your function by reference this.data


        // What do I do here to get outside of this function so
        // I can manipulate it?

        apparatus = data.apparatus
        address = data.address
        description = data.description
      )
    
  ,
  created () 
    this.getMarkers()
  

【讨论】：

是的，这行得通，但发生的情况是 $.getJSON() 调用之后的任何内容都在 $.getJSON 回调之前运行，因为它是异步的。如何仅在运行 getJSON 回调后运行操纵 self.data 的代码？