hi,欢迎访问本站!
当前位置: 首页Web前端正文

jq中表单数据转json的方法

墨初 Web前端 172阅读

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字符串。

声明:无特别说明,转载请标明本文来源!
相关推荐