Wie jQuery-Probleme Anfragen erhalten und an den Server senden

Dieses Mal zeige ich Ihnen, wie jQuery-Anfragen abgerufen und an den Server gesendet werden. Das Folgende ist ein praktischer Fall. Schauen wir uns das an.

Angenommen, es gibt eine Website A, die über eine einfache Seite zur Eingabe eines Benutzernamens verfügt. Auf der Benutzeroberfläche befinden sich zwei Eingabefelder. Das erste Eingabefeld ist in einem Formular enthalten und wird zur Implementierung des Formulars verwendet. Die Eingabefelder sind separat und nicht im Formular enthalten. Lassen Sie uns diese beiden Eingabefelder verwenden, um den Ajax von jQuery zu lernen.

1, Front-End-HTML und Javascript-Code

Seiten-HTML

<main style="text-align: center; margin: 200px auto;">
   <h2>输入用户名</h2>
   <form class="" action="demo01.php" method="post" style="margin-bottom: 20px;">
   <input id="user-name" type="text" name="username" placeholder="请填写您的用户名">
    <input type="submit" name="submit1" value="form提交1" class="input">
   </form>
   <input id="user-name2" type="text" name="username2" placeholder="请填写您的用户名">
   <input type="button" name="submit2" value="ajax提交2">
   <p class="box">
   </p>
  </main>
  <script src="../../js/jquery-3.1.0.min.js"></script>
  <script src="demo.js"></script>

Der auf der Seite eingeführte Code demo01.js. Beachten Sie, dass hier eine einfache GET-Anfrage implementiert wird.

 $(function($) {
  $('input[name=submit2]').on('click', function(e) {
   let username = '';
   if ('' !== (username = $('#user-name2').val())) {
    $.ajax({
     url: `demo.php?name=${username}`,
     dataType: 'json',
     method: 'GET',
     success: function(data) {
      if (data.result == 1) {
       $('.box').html(`<p>你的姓名${username}已成功保存。</p>`);
      }
     },
     error: function(xhr) {
      // 导致出错的原因较多，以后再研究
      alert('error:' + JSON.stringify(xhr));
     }
    })
    .done(function(data) {
     // 请求成功后要做的工作
     console.log('success');
    })
    .fail(function() {
     // 请求失败后要做的工作
     console.log('error');
    })
    .always(function() {
     // 不管成功或失败都要做的工作
     console.log('complete');
    });
   }
  });
 });

Die ajax()-Methode von jQuery hat zwei Schreibweisen, nämlich: $.ajax(url [,settings]); Beide Schreibweisen sind meiner Meinung nach in Ordnung Eine Methode eignet sich für Situationen mit weniger Parametern. Wenn Sie beispielsweise nur eine einfache URL-Anfrage stellen, gibt es keine Anforderungen an die zurückgegebenen Daten, das Format und die Fehler. Sie müssen dann nur einen URL-Parameter übergeben Sie können die zweite Methode verwenden. Das obige demo01.js verwendet die zweite Schreibmethode. Die Parameter und zugehörigen Funktionen werden unten erläutert.

(1) Die Parameter von ajax() im obigen Code

Sie können sehen, dass die Parametertypen hier alle Javascript-Objekte sind, Das heißt, sie sind alle o = {key: value}; Die jQuery-Dokumentation legt fest, dass die Parameter hier nur PlainObject (Objekttypobjekte) sein dürfen, nicht null, benutzerdefinierte Arrays oder Dokumente, die zu einer bestimmten Ausführungsumgebung (z. B. einem Browser) und zu einem bestimmten Objekttyp gehören. Es ist hier nicht einfach, es klar zu erklären, Sie können ein kleines Experiment durchführen. Öffnen Sie Node Repl in der Befehlszeile und führen Sie den folgenden Test durch:

> node
 > typeof(null);
 'object'
 > typeof([]);
 'object'
 > typeof(document);
 'undefined'
 > typeof({});
 'object'

Sie können sehen, dass null, [] (Array-Typ) und {} (Objekttyp) alles Objekte sind. Weil alles in js ein Objekt ist. In einer interaktiven Umgebung ist das Dokument eine undefinierte Variable, daher ist sein Typ undefiniert. Wenn typeof(document) in einer Browserumgebung getestet wird, ist sein Typ ebenfalls Objekt. Die im Code verwendeten Parameter werden im Folgenden einzeln erläutert:

url, die anzufordernde URL-Adresse, ihr Wert sollte eine Zeichenfolge sein, die die URL enthält.

dataType, string. Der Datentyp, der nach einer Anfrage voraussichtlich vom Server zurückgegeben wird. Die Typen, die angegeben werden können, sind XML, HTML, Skript, JSON, JSONP und Text. Wenn nicht angegeben, trifft jquery eine Beurteilung basierend auf MIME und gibt einen der folgenden Typen zurück: XML, JSON, Skript und HTML.

Methode, Zeichenfolge. HTTP-Anforderungsmethode , der Standardwert ist GET und der obige Code gibt POST an.

Erfolg, Typ: Funktion (Anything data, String textStatus, jqXHR jqXHR), anonyme Funktion. Die Funktion, die nach einer erfolgreichen HTTP-Anfrage aufgerufen werden soll, kann drei Parameter an sie übergeben: die vom Server zurückgegebenen Daten (wenn oben dataType angegeben ist, muss der vom Server zurückgegebene Datentyp mit dem oben durch dataType angegebenen Typ übereinstimmen), ein Zustand, der durch die Zeichenfolge textStatus und ein jqXHR-Objekt beschrieben werden kann. Sie können sehen, dass oben nur die vom Server zurückgegebenen Daten übergeben werden.

error, Typ: Function(jqXHR jqXHR, String textStatus, String errorThrown), anonyme Funktion. Die Funktion, die nach dem Scheitern der HTTP-Anfrage aufgerufen werden soll, kann auch drei Parameter übergeben.

Zusätzlich zu diesen Parametern gibt es viele andere Parameter wie async, dataFilter, mimeType usw. Das aktuelle einfache Skript verwendet jedoch nicht so viele Parameter.

(2) „Lazy-Loading-Funktion“

Im obigen Code $.ajax().done().fail().always() jqXHR.done (), jqXHR.fail() und jqXHR.always() können jeweils Arbeit hinzufügen, die verarbeitet werden soll, wenn das zurückgestellte Objekt analysiert, abgelehnt, analysiert oder abgelehnt wird, z. B. das Hinzufügen einer Funktion oder etwas Ähnliches. Warum dies möglich ist, hängt davon ab, was $.ajax() zurückgibt. Es gibt ein jqXHR-Objekt zurück (wenn die Jquery-Version größer als 1.5 ist). Dieses Objekt implementiert die Promise-Schnittstelle (Promise-Mechanismus, der zur Übermittlung asynchroner Vorgangsnachrichten verwendet wird und ein Ereignis darstellt, dessen Ergebnis erst in der Zukunft bekannt sein wird). Dadurch können mehrere Rückruffunktionen innerhalb einer einzelnen Anfrage oder sogar nach Abschluss der Anfrage hinzugefügt werden.

标题“延迟加载”描述的不够准确，但从效果上看是有延迟加载的效果。关于这个问题更详细的解释可以参考jQuery文档中对jqXHR的解释  或一位前端前辈的解释jQuery的deferred对象详解 。

 2，后端运行在nginx服务器上的php代码

后端的逻辑很简单：我们把前端获取的数据保存到名为data-demo01的文件中，保存成功则向前端返回一个1作为标志。

（1）前端ajax发起GET请求

如果前端的ajax发起的是一个GET请求，那么后端也比较好处理：

  if (isset($_GET['name']) && !empty($_GET['name'])) {
   $username = trim($_GET['name']);
   if (file_put_contents('data-demo01', $username)) {
    echo '{"result": 1}';
   } 
}

（2）前端ajax发起POST请求

js代码中需要修改下ajax()的url、method参数，并增加一个data参数，修改后如下：

 // 相同的代码省略
 $.ajax({
  url: `demo01.php`,
  dataType: 'json',
  method: 'POST',
  data: {"username": username},
 // 相同的代码省略

因为用POST传递数据，所以去掉url中用来传递数据的参数，下面的data类型要与dataType一致，为json格式，然后将username作为值传递。

那么后端的代码也就可以确定了：

 if (isset($_POST['username']) && !empty($_POST['username'])) {
   $username = trim($_POST['username']);
   if (file_put_contents('data-demo01', $username)) {
    echo '{"result": 1}';
   }
  }

如果不出错的话，效果应该是下面这样然后查看下data-demo01，名字果然被保存了。

那么问题来了，如果出错了呢？比如data-demo01文件不可写，或者后台服务器返回的数据格式有错误，或者网络出错。那又该怎么处理呢？我现在也不太清楚，后续再研究吧。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

html直接显示JSON方法详解

PHP操作JSON方法大全

Das obige ist der detaillierte Inhalt vonWie jQuery-Probleme Anfragen erhalten und an den Server senden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!