PHP implementiert die Formularübermittlung, springt jedoch nicht

In der Webentwicklung ist die Form (Form) ein sehr kritisches Element. Über Formulare können Benutzer Daten an den Server übermitteln. In vielen Anwendungen springt das Formular nach der Übermittlung auf eine andere Seite. Dadurch können die Übermittlungsergebnisse gut angezeigt werden, aber manchmal müssen wir das Formular ohne zu springen absenden. In diesem Artikel wird erläutert, wie Sie die Übermittlung von PHP-Formularen ohne Sprünge implementieren.

1. Senden Sie das Formular mit AJAX

AJAX ist die Abkürzung für Asynchronous JavaScript and XML, die es dem Browser ermöglicht, Anfragen asynchron an den Server zu senden und Antworten zu empfangen. Mithilfe der AJAX-Technologie können wir das Formular absenden, ohne die Seite zu aktualisieren, und die vom Server zurückgegebenen Daten dynamisch auf der Seite anzeigen.

Das Folgende ist der HTML-Code eines Formulars, das ein Eingabefeld für Benutzername und Passwort sowie eine Schaltfläche zum Senden enthält:

<form id="login-form" method="post" action="">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  
  <button type="submit" id="submit-btn">提交</button>
</form>

Als nächstes müssen wir JavaScript-Code verwenden, um das Übermittlungsereignis des Formulars zu erfassen, und dann die AJAX-Technologie verwenden um die Formulardaten an den Server zu senden. In diesem Fall verwenden wir die jQuery-Bibliothek, um den Code zu vereinfachen.

$(document).ready(function() {
  $('#login-form').submit(function(event) {
    // 阻止表单默认提交行为
    event.preventDefault();
  
    // 通过AJAX提交表单数据
    $.ajax({
      type: 'POST',
      url: 'login.php',
      data: $('#login-form').serialize(),
      success: function(data) {
        // 处理服务器返回的数据
        alert('登录成功！');
      }
    });
  });
});

Im obigen Code müssen wir zunächst das Standardübermittlungsverhalten des Formulars verhindern. Anschließend verwenden wir die Methode $.ajax(), um die Formulardaten an den Server zu senden. Die Methode $.ajax() akzeptiert ein JavaScript-Objekt als Parameter, der Informationen wie den Anforderungstyp, die URL, die Daten und die Rückruffunktion enthält. $.ajax() 方法来向服务器发送表单数据。 $.ajax() 方法接受一个 JavaScript 对象作为参数，该对象中包含了请求的类型、URL、数据和回调函数等信息。

二、使用隐藏iframe提交表单

除了使用AJAX技术，我们还可以使用隐藏iframe技术来提交表单，并在同一个页面中显示服务器返回的结果。

下面是一个表单的HTML代码，其中包含了一个用户名和密码输入框以及提交按钮：

<form id="login-form" method="post" action="login.php" target="login-iframe">
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">
  
  <label for="password">密码：</label>
  <input type="password" id="password" name="password">
  
  <button type="submit" id="submit-btn">提交</button>
</form>

<iframe name="login-iframe" id="login-iframe" style="display:none;"></iframe>

在表单中，我们设置了一个目标为 "login-iframe" 的隐藏iframe元素，并将表单的target属性设置为该iframe的名称。当用户提交表单时，表单数据将被提交到指定的URL并在该iframe中进行处理。

接下来，我们需要使用JavaScript代码来捕获表单的提交事件，并将其重定向到隐藏的iframe中。

$(document).ready(function() {
  $('#login-form').submit(function() {
    // 将表单的action属性替换掉iframe的src属性
    $('#login-iframe').attr('src', $('#login-form').attr('action'));
    return false;
  });
});

function loginSuccess() {
  // 处理服务器返回的数据
  alert('登录成功！');
}

在上述代码中，我们将表单的 action 属性替换为隐藏的iframe的 src 属性，从而将表单数据提交到服务器。 由于表单的提交可以在iframe中进行，因此我们可以在服务器返回数据并且将其显示在该iframe中。在返回的数据中，我们可以通过JavaScript调用 loginSuccess()

2. Verwenden Sie versteckte Iframes, um das Formular zu senden

Zusätzlich zur Verwendung der AJAX-Technologie können wir auch versteckte Iframe-Technologie verwenden, um das Formular zu senden und die vom Server zurückgegebenen Ergebnisse auf derselben Seite anzuzeigen.

Das Folgende ist der HTML-Code eines Formulars, das ein Eingabefeld für Benutzername und Passwort sowie eine Schaltfläche zum Senden enthält:

rrreee

Im Formular legen wir ein verstecktes Iframe-Element mit dem Ziel „login-iframe“ fest und ändern die Formulare Das Zielattribut wird auf den Namen des Iframes gesetzt. Wenn der Benutzer das Formular absendet, werden die Formulardaten an die angegebene URL übermittelt und innerhalb dieses Iframes verarbeitet. 🎜🎜Als nächstes müssen wir JavaScript-Code verwenden, um das Submit-Ereignis des Formulars zu erfassen und es in einen versteckten Iframe umzuleiten. 🎜rrreee🎜Im obigen Code ersetzen wir das Attribut action des Formulars durch das Attribut src des versteckten Iframes, um die Formulardaten an den Server zu senden. Da die Formularübermittlung in einem Iframe erfolgen kann, können wir die Daten vom Server zurückgeben und im Iframe anzeigen. In den zurückgegebenen Daten können wir über JavaScript die Funktion loginSuccess() aufrufen, um die vom Server zurückgegebenen Daten zu verarbeiten. 🎜🎜Zusammenfassung🎜🎜Das Obige stellt zwei Methoden zur Implementierung der PHP-Formularübermittlung ohne Springen vor. Unter anderem ist die durch die AJAX-Technologie implementierte Methode bequemer und einfacher zu erweitern, erfordert jedoch bestimmte JavaScript-Kenntnisse. Obwohl es einfacher ist, ein Formular mithilfe der versteckten Iframe-Technologie einzureichen, birgt sie möglicherweise gewisse Sicherheitsrisiken und muss daher mit Vorsicht verwendet werden. 🎜🎜In der tatsächlichen Entwicklung können wir entsprechend unseren Bedürfnissen eine Methode wählen, die zu uns passt. Unabhängig davon, welche Methode verwendet wird, empfehlen wir zur Gewährleistung der Sicherheit der Anwendung eine strikte Validierung und Filterung der Formulardaten. 🎜

Das obige ist der detaillierte Inhalt vonPHP implementiert die Formularübermittlung, springt jedoch nicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!