js表单提交详解

发布时间：2023-05-20

一、js表单提交代码

在前端开发中，表单提交是最常见的操作之一。在js中，表单提交可以通过以下代码实现：

function submitForm(){
  var form = document.getElementById("myForm");
  form.submit();
}

其中，myForm是表单元素的id，通过form.submit()实现提交表单的操作。如果需要在表单提交前进行一些检查或其他的操作，也可以使用form.submit()之前进行相应的处理。

二、js表单提交的方式有几种

在HTML中，表单可以通过POST和GET方法提交，在JS中其实也可以通过这两种方式进行提交：

// post提交
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "submit.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("name=John&age=25");
// get提交
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "submit.php?name=John&age=25", true);
xmlhttp.send();

可以看到，在以上代码中，分别使用了POST和GET方式提交表单。无论是使用哪种方式，都需要创建一个XMLHttpRequest对象，并且设置相应的参数。不同的是，在POST方式中，还需要设置请求头的Content-type，并且将要提交的数据通过send()方法进行发送。而在GET方式中，则直接将要提交的数据拼接在URL中即可。

三、js表单提交数组

在实际开发中，我们有时需要提交一组数据，而不是单个数据。在这种情况下，我们可以使用数组来提交表单：

var fruits = ["apple", "banana", "orange"];
var form = document.createElement("form");
for (var i = 0; i < fruits.length; i++) {
  var input = document.createElement("input");
  input.type = "hidden";
  input.name = "fruits[]";
  input.value = fruits[i];
  form.appendChild(input);
}
document.body.appendChild(form);
form.submit();

以上代码中，我们创建了一个包含3个水果的数组，然后通过for循环来将每个水果作为表单元素的value值，并将元素添加到一个新创建的form元素中。最后，将form元素添加到body中，并调用submit()即可。

四、js表单提交form

除了创建表单元素和设置表单元素的value值之外，我们还可以通过FormData对象来进行表单提交操作：

var form = document.getElementById("myForm");
var formData = new FormData(form);
// 将表单数据转为JSON字符串
var jsonData = JSON.stringify(Object.fromEntries(formData));
// 发送AJAX请求
var xhr = new XMLHttpRequest();
xhr.open('POST', 'submit.php', true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.send(jsonData);

以上代码中，我们先通过document.getElementById()获取表单元素对象，然后创建一个FormData对象，并将表单元素传入其中。由于发送的数据需要为JSON格式，所以需要将formData对象转换为JSON字符串。最后，创建一个XMLHttpRequest对象发送AJAX请求即可。

五、js表单提交验证跳转

表单提交之前，我们需要进行一些验证操作，以确保用户填写的数据的正确性。而在验证成功后，我们需要将用户跳转到另一个页面。在JS中，可以通过以下代码实现：

var form = document.getElementById("myForm");
form.addEventListener("submit", function(event){
  event.preventDefault(); // 阻止默认的表单提交操作
  // 验证表单内容
  if (验证成功) {
    // 跳转到另一个页面
    window.location.href = "success.html";
  }
});

以上代码中，我们通过给form绑定submit事件，在提交事件触发后，首先阻止默认的表单提交操作。然后再进行表单内容的验证操作，如果验证成功，则通过window.location.href跳转到另一个页面。

六、js表单提交成功弹出框显示信息

除了跳转到另一个页面之外，我们还可以通过弹出框的方式，将提交成功的信息显示给用户：

var form = document.getElementById("myForm");
form.addEventListener("submit", function(event){
  event.preventDefault(); // 阻止默认的表单提交操作
  // 验证表单内容
  if (验证成功) {
    alert("提交成功！");
    form.reset(); // 重置表单内容
  }
});

以上代码中，我们仍然通过阻止默认的表单提交操作和表单内容的验证操作来确保用户提交的数据可靠性。如果验证成功，则通过alert()方法弹出提交成功的提示框，并通过form.reset()方法清空表单内容，以方便用户继续填写其他表单。

七、js表单提交内容输出

在表单提交之前，我们可能需要将表单中的数据输出到控制台以便进行调试操作。在JS中，可以通过以下代码实现：

var form = document.getElementById("myForm");
form.addEventListener("submit", function(event){
  event.preventDefault(); // 阻止默认的表单提交操作
  // 输出表单内容
  console.log(form.elements);
});

以上代码中，我们通过console.log()方法将表单元素对象（form.elements）输出到控制台，以方便我们在提交表单之前查看表单中的内容。

八、js表单提交事件

在表单提交的过程中，我们可能需要在某些时刻进行一些操作，例如在表单提交完成后，需要重新加载页面。在这种情况下，可以使用表单提交的事件来进行监听和处理操作：

var form = document.getElementById("myForm");
form.addEventListener("submit", function(event){
  event.preventDefault(); // 阻止默认的表单提交操作
  // 在表单提交完成后，重新加载页面
  window.addEventListener("load", function(){
    window.location.reload();
  });
});

以上代码中，我们通过给window对象添加load事件来监听页面是否已经重新加载，当页面完成重新加载操作之后，则通过window.location.reload()方法重新加载页面。

九、js表单提交数据

在表单提交的过程中，有时我们需要添加一些额外的数据，例如一个token或用户id等。在JS中，可以通过以下代码向表单添加数据：

var form = document.getElementById("myForm");
// 创建数据对象
var data = {
  token: "xxxxx",
  userId: "12345"
};
// 将数据添加到表单中
for (var key in data) {
  var input = document.createElement("input");
  input.type = "hidden";
  input.name = key;
  input.value = data[key];
  form.appendChild(input);
}
// 提交表单
form.submit();

以上代码中，我们先创建了一个数据对象（data），然后通过for...in循环来将数据添加到表单中。最后，提交表单即可。

十、js表单提交结合onclick选取

有时，我们需要在某些操作之后才进行表单提交操作，例如用户选择了一个选项之后才能进行提交。在这种情况下，可以结合onclick事件来实现：

var form = document.getElementById("myForm");
var btn = document.getElementById("submitBtn");
btn.addEventListener("click", function(event){
  event.preventDefault(); // 阻止默认的submit事件
  // 验证是否选择了选项
  var option = document.getElementById("option");
  if (option.checked) {
    // 提交表单
    form.submit();
  } else {
    alert("请选择一个选项！");
  }
});

以上代码中，我们用button元素代替了submit元素来进行表单提交。然后给button元素绑定了click事件，其中通过阻止默认的submit事件和验证是否选择了选项来实现表单提交的操作。

推荐文章