PHP implémente la soumission de formulaire mais ne saute pas

Dans le développement Web, le formulaire (Form) est un élément très critique. Grâce à des formulaires, les utilisateurs peuvent soumettre des données au serveur. Dans de nombreuses applications, le formulaire passera à une autre page après la soumission. Cela peut bien afficher les résultats de la soumission, mais nous devons parfois soumettre le formulaire sans sauter. Cet article explique comment implémenter la soumission de formulaire PHP sans sauter.

1. Soumettez le formulaire en utilisant AJAX

AJAX est l'abréviation de Asynchronous JavaScript et XML, qui permet au navigateur d'envoyer des requêtes au serveur de manière asynchrone et de recevoir des réponses. En utilisant la technologie AJAX, nous pouvons soumettre le formulaire sans actualiser la page et afficher dynamiquement les données renvoyées par le serveur sur la page.

Ce qui suit est le code HTML d'un formulaire, qui contient une zone de saisie du nom d'utilisateur et du mot de passe et un bouton de soumission :

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

Ensuite, nous devons utiliser le code JavaScript pour capturer l'événement de soumission du formulaire, puis utiliser la technologie AJAX pour envoyer les données du formulaire au serveur. Dans ce cas, nous utilisons la bibliothèque jQuery pour simplifier le code.

$(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('登录成功！');
      }
    });
  });
});

Dans le code ci-dessus, nous devons d'abord empêcher le comportement de soumission par défaut du formulaire. Nous utilisons ensuite la méthode $.ajax() pour envoyer les données du formulaire au serveur. La méthode $.ajax() accepte un objet JavaScript comme paramètre, qui contient des informations telles que le type de demande, l'URL, les données et la fonction de rappel. $.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. Utilisez l'iframe caché pour soumettre le formulaire

En plus d'utiliser la technologie AJAX, nous pouvons également utiliser la technologie iframe cachée pour soumettre le formulaire et afficher les résultats renvoyés par le serveur sur la même page.

Ce qui suit est le code HTML d'un formulaire, qui contient une zone de saisie du nom d'utilisateur et du mot de passe et un bouton d'envoi :

rrreee

Dans le formulaire, nous définissons un élément iframe masqué avec la cible "login-iframe" et modifions le formulaire. L'attribut target est défini sur le nom de l'iframe. Lorsque l'utilisateur soumet le formulaire, les données du formulaire sont soumises à l'URL spécifiée et traitées dans cette iframe. 🎜🎜Ensuite, nous devons utiliser du code JavaScript pour capturer l'événement de soumission du formulaire et le rediriger vers une iframe cachée. 🎜rrreee🎜Dans le code ci-dessus, nous remplaçons l'attribut action du formulaire par l'attribut src caché de l'iframe pour soumettre les données du formulaire au serveur. Étant donné que la soumission du formulaire peut être effectuée dans une iframe, nous pouvons renvoyer les données du serveur et les afficher dans l'iframe. Dans les données renvoyées, nous pouvons appeler la fonction loginSuccess() via JavaScript pour traiter les données renvoyées par le serveur. 🎜🎜Résumé🎜🎜Ce qui précède présente deux méthodes pour implémenter la soumission de formulaires PHP sans sauter. Parmi elles, la méthode implémentée par la technologie AJAX sera plus pratique et plus facile à développer, mais elle nécessite certaines compétences JavaScript. Bien qu'il soit plus simple de soumettre un formulaire en utilisant la technologie iframe cachée, celui-ci peut comporter certains risques de sécurité et doit donc être utilisé avec prudence. 🎜🎜En développement réel, nous pouvons choisir une méthode qui nous convient en fonction de nos besoins. Quelle que soit la méthode utilisée, afin de garantir la sécurité de l'application, nous recommandons une validation et un filtrage stricts des données du formulaire. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!