자바스크립트 양식을 객체로 변환

객체로 변환된 JavaScript 양식

웹 개발에서 양식은 매우 일반적인 구성 요소입니다. 양식에서 입력 데이터를 가져와야 하는 경우 일반적으로 개체 형식으로 데이터를 처리합니다. 양식을 JavaScript 개체로 변환하면 데이터를 쉽게 조작할 수 있습니다. 이 기사에서는 JavaScript를 사용하여 양식을 개체로 변환하는 방법을 다룹니다.

HTML에서는 일반적으로 양식 요소를 사용하여 양식을 만듭니다. 우리는 JavaScript를 사용하여 양식 요소를 가져온 다음 양식의 모든 컨트롤을 반복하고 해당 값을 가져와 개체에 저장합니다. 예는 다음과 같습니다.

HTML Form

먼저 아래와 같이 HTML로 먼저 양식을 만들어야 합니다.

<form>
  <input type="text" name="firstName" value="John">
  <input type="text" name="lastName" value="Doe">
  <input type="email" name="email" value="john.doe@example.com">
  <input type="submit" value="Submit">
</form>

위 양식에는 3개의 입력 컨트롤과 제출 버튼이 포함되어 있습니다. 각 컨트롤에는 이름과 값이 있습니다.

JavaScript Code

다음으로 양식을 객체로 변환하는 JavaScript 코드를 작성하겠습니다. FormData 개체를 사용하여 양식 컨트롤의 값을 가져옵니다. FormData 개체는 간단한 방법으로 양식 데이터를 가져올 수 있는 새로운 API이며, 파일이 포함된 양식을 처리할 수 있습니다.

이 예에서는 파일 업로드를 포함하지 않으므로 간단한 루프를 사용하여 양식의 모든 값을 가져올 수 있습니다. name 속성을 통해 각 컨트롤의 이름을 얻을 수 있고, value 속성을 통해 각 컨트롤의 값을 얻을 수 있습니다. 또한 각 값을 올바르게 처리하고 있는지 확인하기 위해 각 컨트롤의 유형을 확인해야 합니다.

다음은 JavaScript 코드입니다.

// 获取表单元素
var form = document.querySelector('form');

// 创建一个空对象来存储表单数据
var formData = {};

// 循环所有控件
for (var i = 0; i < form.elements.length; i++) {
  var element = form.elements[i];
  var name = element.name;
  var value = element.value;

  // 确保控件被支持，并且不包含文件
  if (name && value && (element.type !== 'file')) {
    if (element.type === 'number') {
      // 将数字转换成数值类型
      value = parseFloat(value);
    }
    formData[name] = value;
  }
}

// 输出表单数据对象
console.log(formData);

위 코드에서는 먼저 양식 요소를 가져온 다음 빈 개체 formData를 만들어 양식 데이터를 저장합니다. 루프를 사용하여 모든 양식 컨트롤을 반복하고 이름과 값을 가져와 formData 개체에 저장합니다.

각 컨트롤의 유형도 확인했다는 점을 참고하세요. 컨트롤이 숫자 유형인 경우 숫자 유형으로 변환하여 개체에 저장합니다.

마지막으로 양식 데이터 개체를 콘솔에 출력합니다.

테스트 코드

다음은 양식 개체가 올바른지 확인하는 테스트 코드입니다.

// 测试代码
var form = document.querySelector('form');
form.elements['firstName'].value = 'Jane';
form.elements['lastName'].value = 'Doe';
form.elements['email'].value = 'jane.doe@example.com';

var formData = {};

for (var i = 0; i < form.elements.length; i++) {
  var element = form.elements[i];
  var name = element.name;
  var value = element.value;
  if (name && value && (element.type !== 'file')) {
    if (element.type === 'number') {
      value = parseFloat(value);
    }
    formData[name] = value;
  }
}

console.log(formData);

위의 테스트 코드를 실행하면 출력은 다음과 같습니다.

{
  firstName: "Jane",
  lastName: "Doe",
  email: "jane.doe@example.com"
}

이제 양식을 JavaScript 개체로 변환했으므로, AJAX 요청으로 전송하는 등 이 데이터를 쉽게 조작할 수 있습니다.

위 내용은 자바스크립트 양식을 객체로 변환의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!