PHP implements form submission but does not jump

In web development, form (Form) is a very critical element. Through forms, users can submit data to the server. In many applications, the form will jump to another page after submission. This can display the submission results well, but sometimes we need to submit the form without jumping. This article will introduce how to implement PHP form submission without jumping.

1. Submit the form using AJAX

AJAX is the abbreviation of Asynchronous JavaScript and XML, which enables the browser to send requests to the server asynchronously and receive responses. By using AJAX technology, we can submit the form without refreshing the page and dynamically display the data returned by the server on the page.

The following is the HTML code of a form, which contains a username and password input box and a submit button:

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

Next, we need to use JavaScript code to capture the submit event of the form, and then Use AJAX technology to send form data to the server. In this case, we are using the jQuery library to simplify the 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('登录成功！');
      }
    });
  });
});

In the above code, we first need to prevent the default submission behavior of the form. We then use the $.ajax() method to send the form data to the server. $.ajax() The method accepts a JavaScript object as a parameter, which contains information such as the request type, URL, data, and callback function.

2. Use hidden iframe to submit the form

In addition to using AJAX technology, we can also use hidden iframe technology to submit the form and display the results returned by the server on the same page.

The following is the HTML code of a form, which contains a username and password input box and a submit button:

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

In the form, we set a target as "login-iframe" Hide the iframe element and set the form's target attribute to the name of the iframe. When the user submits the form, the form data is submitted to the specified URL and processed within that iframe.

Next, we need to use JavaScript code to capture the form's submit event and redirect it to a hidden iframe.

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

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

In the above code, we replace the action attribute of the form with the src attribute of the hidden iframe to submit the form data to the server. Since the form submission can be done in an iframe, we can return the data from the server and display it in the iframe. In the returned data, we can call the loginSuccess() function through JavaScript to process the data returned by the server.

Summary

The above introduces two methods to implement PHP form submission without jumping. Among them, the method implemented by AJAX technology will be more convenient and easy to expand, but it requires certain JavaScript skills. Although it is simpler to submit a form using hidden iframe technology, it may have certain security risks, so it needs to be used with caution.

In actual development, we can choose a method that suits us according to our needs. No matter which method is used, in order to ensure the security of the application, we recommend strict validation and filtering of form data.

The above is the detailed content of PHP implements form submission but does not jump. For more information, please follow other related articles on the PHP Chinese website!