Java Script表单 - Javascript

Javascript是一种广泛使用的脚本语言，主要应用在网页前端开发中。在Java应用程序中，使用Javascript可以轻松地在页面中添加可交互的表单。

表单基本结构

以下是一个最基本的表单结构，其中包括一个文本输入框和一个提交按钮。

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br><br>
  <input type="submit" value="Submit">
</form>

表单验证

对于一个表单，通常都要对用户输入的数据进行验证，以保证输入的数据正确有效。

以下是一个使用Javascript进行表单验证的实例。

<form onsubmit="return validateForm()">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br><br>
  <input type="submit" value="Submit">
</form>

<script>
function validateForm() {
  var name = document.forms[0]["name"].value;
  if (name == "") {
    alert("Name must be filled out");
    return false;
  }
}
</script>

这个实例中，我们在form元素中添加了onsubmit属性，当用户点击提交按钮时就会触发这个属性所绑定的validateForm()函数。

在validateForm()函数中，我们首先获取了用户输入的name值，然后进行了判断：如果name为空，则弹出警告框提示用户并返回false，阻止表单提交。

表单重置

当用户提交表单后，可以通过重置按钮清空所有已输入的数据。以下是一个包含重置按钮的表单结构。

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br><br>
  <input type="reset" value="Reset">
  <input type="submit" value="Submit">
</form>

表单提交

当用户点击提交按钮后，表单数据将被发送至服务器端。以下是一个表单提交的实例，其中使用了AJAX技术实现异步提交。

<form onsubmit="submitForm(); return false;">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br><br>
  <input type="submit" value="Submit">
</form>

<script>
function submitForm() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      alert(this.responseText);
    }
  };
  xhr.open("POST", "submit_form.php", true);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send("name=" + document.forms[0]["name"].value);
}
</script>

这个实例中，我们在form元素中添加了onsubmit属性，当用户点击提交按钮时就会触发这个属性所绑定的submitForm()函数。

在submitForm()函数中，我们创建了一个XMLHttpRequest对象，用于通过AJAX异步提交表单数据。我们设置了onreadystatechange属性来监听响应状态，当响应状态为4并且状态码为200时，代表服务器成功接收到了表单数据并做出了响应，此时我们弹出一个提示框显示服务器返回的响应内容。

总结

以上是Java Script表单的基本用法，包括表单的基本结构、验证、重置和提交，希望能够帮助大家更好地开发网页应用程序。