如何使用JavaScript/jQuery获取表单数据
serializeArray()方法通过序列化表单值创建一个对象数组(名称和值)。这个方法可以用来获取表单数据。
语法:
$(selector).serializeArray()
参数:它不接受任何参数。
返回值:它返回输入字段中的所有值。
示例:
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script>
(document).ready(function() {
("button").click(function() {
var x = ("form").serializeArray();
.each(x, function(i, field) {
$("#output").append(field.name + ":"
+ field.value + " ");
});
});
});
</script>
<style>
#GFG {
width: 300px;
padding: 50px;
height: 150px;
border: 2px solid green;
}
</style>
</head>
<body>
<div id="GFG">
<form action="#">
Name: <input type="text"
style="margin: 10px;" name="Name">
<br>
</form>
<button>Submit</button>
</div>
<div id="output"></div>
</body>
</html>
输出:
- 在点击按钮之前。
- 点击该按钮后。
jQuery是一个开源的JavaScript库,它简化了HTML/CSS文档之间的交互,它以其 “少写多做 “的理念而广为人知。