使用js提交form表单的两种方法是

什么是表单？

表单是HTML中的一种元素，用于收集用户输入的数据，表单通常包含一组输入字段(如文本框、密码框等),以及一个提交按钮，当用户填写完表单并点击提交按钮时，表单数据将被发送到服务器进行处理。

使用JavaScript提交Form表单的两种方法

1、使用submit()方法

submit()方法是HTML表单元素的一个内置方法，用于提交表单，当用户点击提交按钮时，浏览器会自动调用此方法，要使用submit()方法，只需在HTML中为表单元素添加onsubmit属性，并将其值设置为一个JavaScript函数。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用submit()方法提交表单</title>
</head>
<body>
  <form action="your_server_url" method="post" onsubmit="return submitForm();">
    <label for="username">用户名：</label>
    <input type="text" id="username" name="username">
    <br>
    <label for="password">密码：</label>
    <input type="password" id="password" name="password">
    <br>
    <input type="submit" value="提交">
  </form>
  <script>
    function submitForm() {
      var form = document.forms[0]; // 获取表单元素
      var username = form.elements["username"].value; // 获取用户名输入框的值
      var password = form.elements["password"].value; // 获取密码输入框的值
      var data = "username=" + username + "&password=" + password; // 将用户名和密码拼接成字符串
      // 将数据发送到服务器
      var xhr = new XMLHttpRequest();
      xhr.open("POST", form.action, true);
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.send(data);
      // 如果请求成功，返回false阻止表单默认提交行为
      if (xhr.status === 200) {
        return false;
      } else {
        alert("提交失败，请重试！");
        return false;
      }
    }
  </script>
</body>
</html>

2、使用AJAX发送异步请求

AJAX(Asynchronous JavaScript and XML)是一种在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容的技术，通过使用AJAX,我们可以在不刷新页面的情况下向服务器发送请求，然后根据服务器返回的数据更新页面内容，这种方式可以提高用户体验，特别是在处理表单数据时。

要使用AJAX发送异步请求，我们需要创建一个XMLHttpRequest对象，设置其请求方法、URL和是否异步，然后为其添加事件监听器以处理请求状态变化，调用send()方法发送请求。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用AJAX提交表单</title>
<script>
function submitForm() {
  var form = document.forms[0]; // 获取表单元素
  var username = form.elements["username"].value; // 获取用户名输入框的值
  var password = form.elements["password"].value; // 获取密码输入框的值
  var data = "username=" + username + "&password=" + password; // 将用户名和密码拼接成字符串
  // 将数据发送到服务器
  var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
  xhr.open("POST", form.action, true); // 设置请求方法、URL和是否异步(true表示异步)
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 设置请求头信息，告诉服务器我们发送的数据类型是表单编码格式的字符串(application/x-www-form-urlencoded)
  xhr.onreadystatechange = function() { // 为XMLHttpRequest对象添加事件监听器，处理请求状态变化(readyState为4表示请求已完成)
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) { // 如果请求已完成且状态码为200(表示请求成功)
      var response = JSON.parse(xhr.responseText); // 将服务器返回的JSON字符串解析为JavaScript对象(这里假设服务器返回的是JSON格式的数据)
      var result = response.result; // 从解析后的对象中获取result属性的值(这里假设result属性的值是我们关心的数据)
      var message = response.message || "未知错误"; // 从解析后的对象中获取message属性的值(这里假设message属性的值是错误信息，如果没有message属性则使用默认值“未知错误”)
      var output = document.getElementById("output"); // 根据ID获取页面中的输出元素(这里假设输出元素的ID是“output”)
      output.innerHTML = "<p>结果：" + result + "</p><p>消息：" + message + "</p>"; // 将结果和消息显示在输出元素中(这里假设输出元素是一个无序列表)
    } else if (xhr.readyState === XMLHttpRequest.DONE && xhr.status !== 200) { // 如果请求已完成但状态码不是200(表示请求失败)
      var message = "提交失败，请重试！"; // 根据状态码设置错误信息(这里假设状态码不在200-299范围内时表示失败)
      var output = document.getElementById("output"); // 根据ID获取页面中的输出元素(这里假设输出元素的ID是“output”)
      output.innerHTML = "<p>消息：" + message + "</p>"; // 将错误信息显示在输出元素中(这里假设输出元素是一个段落元素)
    } else if (xhr.readyState !== XMLHttpRequest.OPENED && xhr.readyState !== XMLHttpRequest.DONE) { // 如果请求尚未完成且状态不是OPENED或DONE(表示请求仍在进行中)
      var message = "正在提交表单，请稍候！"; // 根据当前状态设置等待信息(这里假设其他任何状态下都表示正在提交表单)

原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/222015.html

使用js提交form表单的两种方法是

什么是表单？

使用JavaScript提交Form表单的两种方法

相关推荐

html的精度条怎么写

jquery indexof方法怎么使用

如何搭建局域网邮箱服务器？ (局域网邮箱服务器)

jquery如何定义对象

.net form

html怎么添加序号

发表回复