JQuery将表单序列化为JSON字符串

时间:2015-11-02 20:31:17

标签: jquery json

使用以下代码,我能够生成一个数组,但我想构建一个看起来像这样的复杂JSON对象:

<script>

    $('document').ready(function() {
        var $myform = $("#myform"),
            $userData = $myform.find('#userInfo'),
            $adressData = $myform.find('#adressInfo'),
            $btnSubmit = $myform.find('button');

        $btnSubmit.on('click', function (event) {
            event.preventDefault();
            var formData = $myform.serializeArray(),
                obj = {};

            for(var i=0;i<$userData.length;i++){
                obj[formData[i].name] = formData[i].value;
            }
            $.ajax({
                url: '/create/user',
                type: 'post',
                contentType: "application/json",
                data: $myform.formAsJson(),
                success:function(){
                    alert("Great! Everything's OK!");
                },
                error: function(){
                    alert("Booo, something wrong :(");
                }

            });
            return false;
        });
    })
</script>

这是我想要的实际JSON结构:

{
          "firstName" : "first name ",
          "lastName" : "last name",
          "email" : "some@test.com",
          "pass" : "testitbaby",
          "address" : {
            "street" : "street",
            "zip" : "12345",
            "city" : "city",
            "country" : "DE"
          },
          "createDate" : 1445885243494,
          "isUserActivated" : false
        }

1 个答案:

答案 0 :(得分:1)

为了便于阅读,我会自己创建一个对象。如果数组的格式不是您想要的,那么将表单序列化为数组是没有意义的。并且,将表单序列化为数组没有意义,只是循环遍历它并创建相同数据集的对象。您也可以创建一个自定义对象并保持简单。

var obj = {
    firstName: $('#firstName').val(),
    lastName: $('#lastName').val(),
    address: {
        street: $('#street').val(),
        zip: $('#zip').val()
    }
}

然后,在您的AJAX选项中,使用$.param()序列化表单数据以进行发送。 $.param()创建网址编码的字符串,如name=paparazzoKid&email=papkid@pap.com

$.ajax({
    url: '/create/user',
    type: 'post',
    data: $.param(obj),
    success:function(){},
    error: function(){}
});
  

$ .param() - “创建数组,普通对象或类型的序列化表示形式   jQuery对象适合在URL查询字符串或Ajax请求中使用。“

     

http://api.jquery.com/jquery.param/

这是JSFiddle打开FireBug的屏幕截图。它显示我创建的对象和发送的帖子数据。

enter image description here

要在PHP中访问POSTed参数字符串,您只需执行以下操作:

$userStreet = $_POST['address']['street']

如果您的服务器页面需要JSON格式,只需将POST数据编码为服务器页面上的JSON即可。在PHP中,它很简单:

json_encode($_POST)