jq中表单数据转json的方法
墨初 Web前端 835阅读
jq是一个流行的js库,可以帮助我们很方便的操作html文档,其中就包括表单数据的处理。jq将表单的数据转为json格式,可以很好的简化数据的叫魂方法。
jq表单数据转为json数据的方法
例:
<script src="jquery.js"></script>
<form id="myForm">
<label for="name">姓名</label>
<input type="text" id="name" name="name">
<label for="email">邮箱</label>
<input type="email" id="email" name="email">
<button type="submit">提交</button>
</form>
<script>
$(document).ready(function(){
$('#myForm').submit(function(event){
event.preventDefault(); //防止表单提交刷新页面
var formData = $(this).serializeArray(); //将表单数据序列化为对象数组
var json = {}; //创建一个空的JSON对象
$.each(formData, function(){ //遍历对象数组
json[this.name] = this.value; //将数组中的每个对象转为一个JSON属性
});
console.log(json); //打印JSON对象
});
});
</script>代码解释:
1、先使用event.preventDefault()方法防止表单提交刷新页面
2、JQuery的serializeArray()可以以对象数组的形式获取form表单中的数据,每个对象都包含字段名与值。
3、使用js中的$.each()方法遍历数据,并上一步中的对象转为json字符串。