Javascript 详解封装from表单数据为json串进行ajax提交

下面是关于"Javascript 详解封装form表单数据为json串进行ajax提交"的完整攻略：

1. 概述

在web应用中，Ajax已成为不可或缺的一部分。而在使用Ajax进行数据提交时，常会遇到封装form表单数据为json串的需求。本篇攻略会探讨如何通过Javascript实现这一功能。

2. 实现步骤

2.1 获取表单数据

在Javascript中，通过document.getElementById()或document.querySelector()获取表单元素后，可以使用value属性获取这个元素的值。但是，表单元素有多种类型，比如单选框、多选框、下拉框等，每种类型的获取方式都有所不同。所以在获取表单数据时，我们需要先判断表单元素的类型。

以下是一个获取表单数据的示例：

function getFormData(form) {
  let formData = {};
  const allElements = form.elements;
  for (let i = 0; i < allElements.length; i++) {
    const element = allElements[i];
    const elementType = element.type.toLowerCase();
    if (elementType !== 'button' && elementType !== 'submit') {
      let elementValue = null;
      if (elementType === 'select') {
        elementValue = element.options[element.selectedIndex].value;
      } else if (elementType === 'radio') {
        if (element.checked) {
          elementValue = element.value;
        }
      } else if (elementType === 'checkbox') {
        if (element.checked) {
          elementValue = elementVaue || [];
          elementVaue.push(element.value);
        }
      } else {
        elementValue = element.value;
      }
      formData[element.name] = elementValue;
    }
  }
  return formData;
}

2.2 封装成json字符串

当我们获取到表单数据后，需要将其封装成json字符串格式。由于Javascript提供了JSON.stringify()方法，我们可以非常方便地将表单数据转化为json字符串。

以下是一个封装成json字符串的示例：

function getFormDataJsonString(form) {
  const formData = getFormData(form);
  const jsonString = JSON.stringify(formData);
  return jsonString;
}

2.3 发送Ajax请求

最后一步是通过Ajax发送请求。在这个过程中，我们需要使用XMLHttpRequest对象来发送异步请求并处理响应。在发送请求时，我们需要设置请求方式、请求地址、请求头、数据格式等信息。在处理响应时，我们需要设置响应数据的类型、处理响应数据等。

以下是一个使用Ajax发送请求的示例：

function submitFormData(form) {
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        console.log(xhr.responseText);
      } else {
        console.error('Error: ' + xhr.status);
      }
    }
  };
  xhr.open('POST', form.action, true);
  xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
  const formDataJson = getFormDataJsonString(form);
  xhr.send(formDataJson);
}

3. 示例

下面是一个完整的示例，演示了如何通过Javascript封装表单数据为json字符串并使用Ajax提交：

<!DOCTYPE html>
<html>

<head>
  <title>封装form表单数据为json串进行ajax提交示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <form id="form" action="/post" method="post">
    <div>
      <label for="name">姓名：</label>
      <input type="text" id="name" name="name">
    </div>
    <div>
      <label for="gender">性别：</label>
      <input type="radio" id="gender-male" name="gender" value="male">
      <label for="gender-male">男</label>
      <input type="radio" id="gender-female" name="gender" value="female">
      <label for="gender-female">女</label>
    </div>
    <div>
      <label for="hobbies">爱好：</label>
      <input type="checkbox" id="hobbies-music" name="hobbies" value="music">
      <label for="hobbies-music">音乐</label>
      <input type="checkbox" id="hobbies-travel" name="hobbies" value="travel">
      <label for="hobbies-travel">旅行</label>
      <input type="checkbox" id="hobbies-reading" name="hobbies" value="reading">
      <label for="hobbies-reading">阅读</label>
    </div>
    <div>
      <label for="city">城市：</label>
      <select id="city" name="city">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
      </select>
    </div>
    <div>
      <button type="button" onclick="submitForm()">提交</button>
    </div>
  </form>

  <script type="text/javascript">
    function getFormData(form) {
      let formData = {};
      const allElements = form.elements;
      for (let i = 0; i < allElements.length; i++) {
        const element = allElements[i];
        const elementType = element.type.toLowerCase();
        if (elementType !== 'button' && elementType !== 'submit') {
          let elementValue = null;
          if (elementType === 'select') {
            elementValue = element.options[element.selectedIndex].value;
          } else if (elementType === 'radio') {
            if (element.checked) {
              elementValue = element.value;
            }
          } else if (elementType === 'checkbox') {
            if (element.checked) {
              elementValue = elementVaue || [];
              elementVaue.push(element.value);
            }
          } else {
            elementValue = element.value;
          }
          formData[element.name] = elementValue;
        }
      }
      return formData;
    }

    function getFormDataJsonString(form) {
      const formData = getFormData(form);
      const jsonString = JSON.stringify(formData);
      return jsonString;
    }

    function submitForm() {
      const form = document.getElementById('form');
      const xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            console.log(xhr.responseText);
          } else {
            console.error('Error: ' + xhr.status);
          }
        }
      };
      xhr.open('POST', form.action, true);
      xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
      const formDataJson = getFormDataJsonString(form);
      xhr.send(formDataJson);
    }
  </script>
</body>

</html>

4. 总结

封装form表单数据为json串进行ajax提交，是web应用开发中的常见需求之一。Javascript提供了非常方便的方式来实现这一功能，通过上述三个步骤，可以对表单提交过程进行完整的控制。使用起来非常灵活便捷。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Javascript 详解封装from表单数据为json串进行ajax提交 - Python技术站