Wie kann ich jQuery dazu bringen, eine synchrone und nicht eine asynchrone Ajax-Anfrage durchzuführen?

Question

Ich habe ein JavaScript-Widget, das Standard-Erweiterungspunkte bietet. Einer von ihnen ist die beforecreate Funktion. Sie sollte zurückgeben false um zu verhindern, dass ein Artikel erstellt wird.

Ich habe einen Ajax-Aufruf in dieser Funktion mit jQuery hinzugefügt:

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);
  });
}

Aber ich möchte verhindern, dass mein Widget das Element erstellt, also sollte ich zurückgeben false in der Mutterfunktion, nicht im Rückruf. Gibt es eine Möglichkeit, eine synchrone AJAX-Anfrage mit jQuery oder eine andere in-Browser-API durchzuführen?

Answer 1

Desde el jQuery-Dokumentation : Sie geben die asynchrone Option zu sein falsch um eine synchrone Ajax-Anfrage zu erhalten. Dann kann Ihr Callback einige Daten setzen, bevor Ihre Mutterfunktion fortfährt.

So würde Ihr Code aussehen, wenn Sie ihn wie vorgeschlagen ändern:

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
    });
}

Answer 2

Sie können das Ajax-Setup von jQuery in den synchronen Modus versetzen, indem Sie

jQuery.ajaxSetup({async:false});

Und dann führen Sie Ihre Ajax-Aufrufe mit jQuery.get( ... );

Dann schalten Sie es einfach wieder ein

jQuery.ajaxSetup({async:true});

Ich schätze, es funktioniert genauso, wie von @Adam vorgeschlagen, aber es könnte für jemanden hilfreich sein, der seine Daten neu konfigurieren möchte. jQuery.get() o jQuery.post() bis hin zu den aufwändigeren jQuery.ajax() Syntax.

Answer 3

Ausgezeichnete Lösung! Als ich versuchte, sie zu implementieren, bemerkte ich, dass, wenn ich einen Wert in der Erfolgsklausel zurückgab, dieser als undefiniert zurückkam. Ich musste ihn in einer Variablen speichern und diese Variable zurückgeben. Dies ist die Methode, die ich mir ausgedacht habe:

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;
}

Answer 4

Alle diese Antworten gehen an der Tatsache vorbei, dass ein Ajax-Aufruf mit async:false dazu führt, dass der Browser hängen bleibt, bis die Ajax-Anfrage abgeschlossen ist. Die Verwendung einer Flusskontrollbibliothek löst dieses Problem, ohne dass der Browser hängen bleibt. Hier ist ein Beispiel mit Frame.js :

beforecreate: function(node,targetNode,type,to) {

    Frame(function(next)){

        jQuery.get('http://example.com/catalog/create/', next);
    });

    Frame(function(next, response)){

        alert(response);
        next();
    });

    Frame.init();
}

Answer 5

function getURL(url){
    return $.ajax({
        type: "GET",
        url: url,
        cache: false,
        async: false
    }).responseText;
}

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