jq中表单数据转json的方法
墨初 Web前端 371阅读
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字符串。