Fork me on GitHub

jQuery ajax()使用serialize()提交form数据

  • jQuery的serialize()方法通过序列化表单值创建URL编码文本字符串,我们就可以选择一个或多个表单元素,也可以直接选择form将其序列化,如:

    1
    2
    3
    4
    <form action="">
    First name: <input type="text" name="FirstName" value="Bill" /><br />
    Last name: <input type="text" name="LastName" value="Gates" /><br />
    </form>
    1
    2
    3
    $(document).ready(function(){
    console.log($("form").serialize()); // FirstName=Bill&LastName=Gates
    });
  • 这样,我们就可以把序列化的值传给ajax()作为url的参数,轻松使用ajax()提交form表单了,而不需要一个一个获取表单中的值然后传给ajax(),举例如下:

    1
    2
    3
    4
    5
    6
    7
    8
    $.ajax({
    type: 'post',
    url: 'your url',
    data: $("form").serialize(),
    success: function(data) {
    // your code
    }
    });
  • 使用$.post()$.get()$.getJSON()也是一样的:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    $.post('your url', $("form").serialize(), function(data) {
    // your code
    }
    });

    $.get('your url', $("form").serialize(), function(data) {
    // your code
    }
    });

    $.getJSON('your url', $("form").serialize(), function(data) {
    // your code
    }
    });
------ 本文结束 ------