Die Übermittlung des Jquery-Ajax-Formulars aktualisiert die Seite nicht

In der Webentwicklung ist die Formularübermittlung ein sehr häufiger Vorgang, und normalerweise wird die Formularübermittlung durch eine Seitenaktualisierung abgeschlossen. Was aber, wenn Sie die Seite nach dem Absenden des Formulars nicht aktualisieren möchten? In diesem Artikel wird erläutert, wie Sie mit jQuery und Ajax die Formularübermittlung implementieren, ohne die Seite zu aktualisieren.

1. Warum nicht die Seite aktualisieren

Beim herkömmlichen Formularübermittlungsprozess müssen Benutzer geduldig warten, bis die Seite aktualisiert wird, was die Benutzererfahrung sehr umständlich macht. Wenn die Seite aktualisiert wird, muss der Benutzer möglicherweise den zuvor ausgefüllten Formularinhalt erneut eingeben, was den Benutzer unzufrieden macht. Darüber hinaus kann die Seitenaktualisierung auch zum Verlust einiger Daten führen, was den Benutzern ebenfalls unnötige Probleme bereitet.

Daher kann die Implementierung der Formularübermittlung ohne Aktualisierung der Seite über Ajax die Benutzererfahrung effektiv verbessern und den Benutzern Zeit und Energie sparen.

2. Implementierungsschritte

Als nächstes werden wir die folgenden Schritte verwenden, um die Formularübermittlung zu implementieren, ohne die Seite zu aktualisieren.

1. Abhören des Formularübermittlungsereignisses

Zunächst müssen wir eine Listener-Funktion für das Übermittlungsereignis an das Formular binden, damit das Formular über JavaScript übermittelt werden kann. Gleichzeitig müssen wir das standardmäßige Formularübermittlungsverhalten des Browsers verhindern, indem wir false zurückgeben. Der Code lautet wie folgt:

$('form').submit(function() { 
  // ajax 表单提交代码... 
  return false; 
}); 

2. Formulardaten abrufen

Als nächstes müssen wir die Formulardaten über die Methode serialize() von jQuery abrufen. Diese Methode serialisiert alle Daten im Formular in eine Zeichenfolge zur Verwendung in nachfolgenden Ajax-Anfragen. Der Code lautet wie folgt:

var formData = $('form').serialize(); 

3. Ajax-Anfrage senden

Jetzt müssen wir eine asynchrone Anfrage über die ajax()-Methode von jQuery senden, um das Formular abzusenden, ohne die Seite zu aktualisieren. Der Code lautet wie folgt:

$.ajax({ 
  type: 'POST', 
  url: 'submit.php', 
  data: formData, 
  success: function(result) { 
    // 处理返回的数据 
  } 
}); 

In dieser Ajax()-Methode definieren wir die folgenden Parameter:

• type: Der Typ der Anfrage. In diesem Beispiel haben wir die POST-Methode gewählt. type：请求的类型。在此例中，我们选择了 POST 方法。
• url：请求的目标 URL。这里是 submit.php，代表表单提交后将数据发送到该 PHP 文件中。
• data：发送给服务器的数据。我们使用了之前获取的表单数据 formData。
• success
url: Die Ziel-URL der Anfrage. Hier ist „submit.php“, das die PHP-Datei darstellt, die die Daten nach dem Absenden des Formulars sendet.

data: An den Server gesendete Daten. Wir haben die zuvor erhaltenen Formulardaten formData verwendet.
4. success: Rückruffunktion, nachdem die Anfrage erfolgreich war. In dieser Funktion können wir die vom Server zurückgegebenen Daten entsprechend verarbeiten.

Verarbeiten Sie die vom Server zurückgegebenen Daten.

• Wenn der Server die Daten zurückgibt, können wir sie in der Erfolgsrückruffunktion verarbeiten. Beispielsweise können wir die vom Server zurückgegebenen Daten auf der Seite anzeigen oder den Status der Seite über JavaScript ändern. Der Code lautet wie folgt:

success: function(result) { 
  // 处理返回的数据： 
  alert(result); 
  $('form')[0].reset(); 
} 

• In dieser Rückruffunktion führen wir zwei Operationen an den vom Server zurückgegebenen Daten durch:

Verwenden Sie die Methode „alert()“ von JavaScript, um ein Eingabeaufforderungsfeld anzuzeigen, dessen Inhalt die von zurückgegebenen Daten sind Der Server.

Setzen Sie das Formular über die Methode „reset()“ von jQuery zurück, damit Benutzer neue Daten eingeben können.

An diesem Punkt haben wir durch die oben genannten vier Schritte die Formularübermittlung erfolgreich implementiert, ohne die Seite zu aktualisieren.

1. 3. Vorsichtsmaßnahmen

Obwohl die Formularübermittlung über Ajax die Benutzererfahrung erheblich verbessern kann, gibt es auch einige Dinge, die bei der Verwendung beachtet werden müssen:

Verhindern Sie die wiederholte Übermittlung des Formulars

Da Ajax-Anfragen dies tun asynchron. Wenn Benutzer daher häufig auf die Schaltfläche „Senden“ klicken, wird das Formular möglicherweise wiederholt gesendet. Um dieses Problem zu vermeiden, können wir die Schaltfläche „Senden“ des Formulars beim Senden der Ajax-Anfrage deaktivieren und nach Abschluss der Anfrage aktivieren. Der Code lautet wie folgt:

$('form').submit(function() { 
  // 禁用按钮 
  $('input[type="submit"]', this).attr('disabled', 'disabled'); 

  // ajax 表单提交代码... 

  // 启用按钮 
  $('input[type="submit"]', this).removeAttr('disabled'); 
}); 

Vom Server zurückgegebene Fehler behandeln

Wenn der Server bei Ajax-Anfragen einen falschen Statuscode zurückgibt, müssen wir diese Fehler rechtzeitig behandeln. Normalerweise können wir den vom Server zurückgegebenen Status anhand der Daten in der Erfolgsrückruffunktion beurteilen und entsprechend der spezifischen Situation eine nachfolgende Verarbeitung durchführen. Wenn der vom Server zurückgegebene Statuscode beispielsweise 401 lautet, kann dies bedeuten, dass der Benutzer nicht angemeldet ist. In diesem Fall müssen wir den Benutzer über einen Seitensprung anmelden, um den Zugriff fortzusetzen. 🎜

success: function(result) { 
  if (result.status === 'success') { 
    alert('提交成功'); 
    $('form')[0].reset(); 
  } else if (result.status === 'failed') { 
    alert('提交失败'); 
  } else if (result.status === 'error') { 
    alert('发生了错误：' + result.message); 
  } 
} 

🎜4. Zusammenfassung 🎜🎜In diesem Artikel wird erläutert, wie Sie mit jQuery und Ajax die Formularübermittlung implementieren, ohne die Seite zu aktualisieren. Indem wir das Formularübermittlungsereignis abhören, die Formulardaten abrufen, eine Ajax-Anfrage senden und die vom Server zurückgegebenen Daten verarbeiten, können wir eine Formularübermittlung implementieren, ohne die Seite zu aktualisieren, und das Benutzererlebnis erheblich verbessern. Natürlich müssen Sie bei der Verwendung auch auf einige potenzielle Probleme achten, z. B. die Verhinderung der wiederholten Übermittlung von Formularen und die Behandlung von vom Server zurückgegebenen Fehlern. Ich hoffe, dieser Artikel hilft Ihnen bei der Implementierung der Formularübermittlung, ohne die Seite zu aktualisieren. 🎜

Das obige ist der detaillierte Inhalt vonDie Übermittlung des Jquery-Ajax-Formulars aktualisiert die Seite nicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!