时间戳

首页 > 解决方案 > 有没有办法只使用 PHP 和 JavaScript 来提交表单而不刷新页面？

php - 有没有办法只使用 PHP 和 JavaScript 来提交表单而不刷新页面？

问题描述

我在大学有一个项目，我不想在提交表单后刷新页面。

问题是对于这个项目，我只允许使用基础编程语言，因此我不能使用 jQuery（我使用 post 方法找到了解决方案）或任何类型的库或框架。还有其他方法吗？

如果没有额外的库/框架就无法做到这一点，那么使用 PHP 获取表单信息的最佳方法是什么？表单应该有 GET 或 POST 方法吗？我在网上看到了许多不同的类型，我想确定哪一种效果最好（例如我在项目中拥有的登录、注册表单）。

标签： php

解决方案

你可以使用纯 JS 和 PHP，这是一个简单的例子。您可以使用事件侦听器和XMLHttpRequest对象来发出请求。我建议使用 POST 请求。

POST 和 GET 有什么区别？

GET 和 POST 方法都用于 HTTP 协议中从客户端到服务器的数据传输，但两种方法的主要区别在于 GET 在 URL 字符串中附加请求参数，而 POST 在消息体中携带请求参数，这样更安全在http协议中从客户端传输数据到服务器。通常当你在处理pass和email等数据时，你必须使用 POST，以避免出现安全问题

var myForm = document.getElementById('my_form');

myForm.addEventListener('submit', (e) => {
  e.preventDefault(); // To avoid the page refresh when you click on submit button
})

function login() {
  let userEmail = document.getElementById("email_field").value
  let userPass = document.getElementById("password_field").value
  console.log(`Email: ${userEmail} - Pass: ${userPass}`); // Will print your data
  
  let http = new XMLHttpRequest();
  let url = 'get_data.php'; // Your PHP controller
  let params = `email=${userEmail}&pass=${userPass}`;
  http.open('POST', url, true);

  // Send the proper header information along with the request
  http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

  http.onreadystatechange = function() { // Call a function when the state changes.
      if (http.readyState == 4 && http.status == 200) {
          alert(http.responseText);
      } else {
          console.log('Unable to make the request');
      }
  }
  http.send(params);
}
 <form id="my_form">
    <div>
      <input type="email" id="email_field" placeholder="email">
    </div>
    <div>
      <input type="password" id="password_field" placeholder="password">
    </div>
    <button onclick="login()">login</button>
  </form>

推荐阅读