我有一个提供标准扩展点的JavaScript小部件。其中之一是beforereate函数。它应该返回false以防止创建一个项。

我已经使用jQuery在这个函数中添加了一个Ajax调用:

beforecreate: function (node, targetNode, type, to) {
  jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),

  function (result) {
    if (result.isOk == false) 
        alert(result.message);
  });
}

但是我想阻止小部件创建项目,所以我应该在母函数中返回false,而不是在回调中返回false。是否有一种方法可以使用jQuery或任何其他浏览器内API执行同步AJAX请求?


当前回答

可以通过调用将jQuery的Ajax设置设置为同步模式

jQuery.ajaxSetup({async:false});

然后使用jQuery执行Ajax调用。Get(…);

然后再打开一次

jQuery.ajaxSetup({async:true});

我想它的工作原理与@Adam建议的一样,但它可能对那些想要重新配置jQuery.get()或jQuery.post()到更详细的jQuery.ajax()语法的人有帮助。

其他回答

这是一个例子:

$.ajax({
  url: "test.html",
  async: false
}).done(function(data) {
   // Todo something..
}).fail(function(xhr)  {
   // Todo something..
});

请记住,如果您正在进行跨域Ajax调用(通过使用JSONP)—您不能同步执行,jQuery将忽略async标志。

$.ajax({
    url: "testserver.php",
    dataType: 'jsonp', // jsonp
    async: false //IGNORED!!
});

对于jsonp调用,您可以使用:

ajax—调用您自己的域—并在服务器端执行跨域调用 将代码更改为异步工作 使用像Frame.js这样的“函数排序器”库(这个答案) 阻塞UI而不是阻塞执行(这个答案)(我最喜欢的方式)

async: false会导致浏览器被阻塞。 对于非阻塞同步解决方案,您可以使用以下方法:

ES6/ECMAScript2015

在ES6中,你可以使用生成器和co库:

beforecreate: function (node, targetNode, type, to) {
    co(function*(){  
        let result = yield jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value));
        //Just use the result here
    });
}

ES7

在ES7中,你可以使用async await:

beforecreate: function (node, targetNode, type, to) {
    (async function(){
        let result = await jQuery.get('http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value));
        //Just use the result here
    })(); 
}
function getURL(url){
    return $.ajax({
        type: "GET",
        url: url,
        cache: false,
        async: false
    }).responseText;
}


//example use
var msg=getURL("message.php");
alert(msg);

因为最初的问题是关于jQuery的。在这里值得一提的是(正如这里提到的),可以在$.get()中使用async: false,但理想情况下要避免它,因为异步XMLHTTPRequest已弃用(浏览器可能会给出警告):

$.get({
  url: url,// mandatory
  data: data,
  success: success,
  dataType: dataType,
  async:false // to make it synchronous
});