JS中input表单隐藏域及其使用方法

更新时间:2023-10-21

当需要向后台传递某些信息时,可以使用input表单中的隐藏域。那么在JS中,如何创建隐藏域以及如何使用它呢?本文将详细讲解JS中input表单隐藏域的使用方法,帮助您完成这项技能。

创建隐藏域

在JS中创建input表单中用于发送信息的“隐藏域”,首先需要创建一个空的元素,然后通过设置其type为“hidden”来将它转化为隐藏类别。随后,需要给这个元素赋值。这里需要注意的是,赋值的数据类型应该是字符串类型,这样表单才可以正常接收信息。

下面是一个创建隐藏域的示例代码:

<input name="username" type="hidden" value="John" />

上述代码创建了一个name属性值为username的隐藏域,其中value属性的值为John。当表单被提交时,该值将被传递到后台处理程序以进一步处理。

使用隐藏域

创建好隐藏域后,需要掌握其使用方法。使用隐藏域可以分为以下两个步骤:

1. 获取隐藏域的值

在JS中,获取隐藏域的值需要使用DOM操作中的document对象来获取元素,并且获取到的值需要使用.value属性来获取。

例如,以下是如何获取上述示例代码中隐藏域的值的代码:

let username = document.getElementsByName('username')[0].value;

上述代码中,使用了getElementsByName()方法获取了页面上name属性值为username的元素,然后使用数组下标方式获取到第一个元素,最后使用value属性获取了hidden元素的值。

2. 将隐藏域的值传递到后台

获取到隐藏域的值后,就可以将其传递到后台了。可以通过表单对象的submit()方法将其提交给后台处理程序,也可以通过AJAX等方式进行传递。

例如,以下是通过表单对象的submit()方法,将用户名以POST方式传递到后台的代码示例:

let form = document.createElement('form');
form.method = 'POST';
form.action = 'http://www.31jz.com/login';
let input = document.createElement('input');
input.name = 'username';
input.type = 'hidden';
input.value = 'John';
form.appendChild(input);
document.body.appendChild(form);
form.submit();

上述代码中,使用createElement()方法创建

元素和元素,并设置了表单的method属性、action属性和用户名的value值。使用appendChild()方法将元素添加到


元素中,最后将表单提交。


示例

下面是一个实际应用中的示例,两个隐藏域h1和h2的值被提交至后台,并且在页面中展示ajax返回结果。

<!DOCTYPE html>
<html>
<head>
<script>
function sendRequest() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("result").innerHTML = this.responseText;
    }
  };
  var h1 = document.getElementById("h1").value;
  var h2 = document.getElementById("h2").value;
  var url = "http://www.31jz.com/process.php";
  xhr.open("POST", url, true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.send("h1=" + h1 + "&h2=" + h2);
}
</script>
</head>
<body>
  <input type="hidden" id="h1" value="data1">
  <input type="hidden" id="h2" value="data2">
  <button onclick="sendRequest()">Click me</button>
  <div id="result"></div>
</body>
</html>

在上述代码中,两个隐藏域h1和h2,其值分别被设置为"date1"和"data2"。当点击Click me按钮时,调用sendRequest()函数,利用AJAX技术将h1和h2的值POST到http://www.31jz.com/process.php。后台处理程序收到数据后,返回一个字符串结果,这个结果被展示在元素中的result id所在的位置。

通过上述示例中的方法,可以更加灵活地使用隐藏域,在前端页面和后端数据交互过程中起到重要的作用。