下面是一个简单的例子,演示如何使用 jQuery 将表单转化为 JSON 对象:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form to JSON</title>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" value="John Doe"><br>
<label for="age">Age:</label>
<input type="text" id="age" name="age" value="30"><br>
<label for="city">City:</label>
<input type="text" id="city" name="city" value="Example City"><br>
<input type="submit" value="Submit">
</form>
<script>
$(document).ready(function() {
$('#myForm').submit(function(event) {
event.preventDefault();
// 使用 serializeArray 方法将表单数据转化为对象数组
var formDataArray = $(this).serializeArray();
// 将对象数组转化为 JSON 对象
var formDataObject = {};
$.each(formDataArray, function(index, field) {
formDataObject[field.name] = field.value;
});
// 输出转化后的 JSON 对象
console.log(formDataObject);
});
});
</script>
</body>
</html>
在这个例子中,当表单提交时,阻止默认的提交行为,使用 serializeArray() 方法将表单数据转化为对象数组,然后使用 $.each() 方法将对象数组转化为 JSON 对象。最后,将转化后的 JSON 对象输出到控制台。
这是一个简单的例子,你可以根据实际需求进行更进一步的处理。
转载请注明出处:http://www.zyzy.cn/article/detail/4558/JSON