我有一个提供标准扩展点的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()语法的人有帮助。
其他回答
来自jQuery文档:您将异步选项指定为false以获得同步Ajax请求。然后你的回调函数可以在你的母函数继续之前设置一些数据。
下面是你的代码如果按照建议修改后的样子:
beforecreate: function (node, targetNode, type, to) {
jQuery.ajax({
url: 'http://example.com/catalog/create/' + targetNode.id + '?name=' + encode(to.inp[0].value),
success: function (result) {
if (result.isOk == false) alert(result.message);
},
async: false
});
}
优秀的解决方案!我注意到，当我试图实现它时，如果我在success子句中返回一个值，它返回为未定义。我必须把它存储在一个变量中，然后返回那个变量。这是我想出的方法:
function getWhatever() {
// strUrl is whatever URL you need to call
var strUrl = "", strReturn = "";
jQuery.ajax({
url: strUrl,
success: function(html) {
strReturn = html;
},
async:false
});
return strReturn;
}
可以通过调用将jQuery的Ajax设置设置为同步模式
jQuery.ajaxSetup({async:false});
然后使用jQuery执行Ajax调用。Get(…)；
然后再打开一次
jQuery.ajaxSetup({async:true});
我想它的工作原理与@Adam建议的一样，但它可能对那些想要重新配置jQuery.get()或jQuery.post()到更详细的jQuery.ajax()语法的人有帮助。
因为xmlhttpreonse同步操作已弃用，所以我提出了以下包装XMLHttpRequest的解决方案。这允许有序AJAX查询，但本质上仍然是异步的，这对于单次使用CSRF令牌非常有用。
它也是透明的，因此像jQuery这样的库可以无缝地运行。
/* wrap XMLHttpRequest for synchronous operation */
var XHRQueue = [];
var _XMLHttpRequest = XMLHttpRequest;
XMLHttpRequest = function()
{
var xhr = new _XMLHttpRequest();
var _send = xhr.send;
xhr.send = function()
{
/* queue the request, and if it's the first, process it */
XHRQueue.push([this, arguments]);
if (XHRQueue.length == 1)
this.processQueue();
};
xhr.processQueue = function()
{
var call = XHRQueue[0];
var xhr = call[0];
var args = call[1];
/* you could also set a CSRF token header here */
/* send the request */
_send.apply(xhr, args);
};
xhr.addEventListener('load', function(e)
{
/* you could also retrieve a CSRF token header here */
/* remove the completed request and if there is more, trigger the next */
XHRQueue.shift();
if (XHRQueue.length)
this.processQueue();
});
return xhr;
};
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
})();
}
