JSON表单数据作为动态提交

Question

传递预定义数据时，AJAX帖子可以正常工作，如下所示：

// var data = {“ name”：“ Testing”，“ email”：“ testing@gmail.com”，“ cpf”：“ 9876543210”};

但是我无法从表单动态传递数据。

请帮我解决这个问题。

开机自检功能

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

$(function() {      
    $("#post").click(function() {
        $("#dataIn").text(JSON.stringify($("form").serializeObject()));

        $(function() {
            //var data = {"name" : "Testing", "email" : "testing@gmail.com", "cpf" : "9876543210"};
            var data = ("#dataIn");
            $.ajax({
                type: "POST",
                url: "http://myhost:8080/mypath-rs/rest/beneficiaries",
                //data: JSON.stringify(data),
                contentType: "application/json",
            });
        });
    });
});

表格

<form action="" method="post" class="form-inline">

<label class="sr-only">Name</label>
<input type="text" name="name" class="form-control" id="name" placeholder="Name">

<label class="sr-only">Email</label>
<input type="text"  name="email" class="form-control" id="email" placeholder="Email">


<label class="sr-only">CPF</label>
<input type="text"  name="cpf" class="form-control" id="cpf" placeholder="CPF">

<button id="post" type="submit" type="button">Add </button>
</form>

<p >Json Result</p>
<pre id="dataIn" ></pre>

我不确定是否必须序列化表单，或者JSON.stringify（data）是否已经可以执行此操作。

下面的代码完美地工作：

非动态，但有效

    $("#post1").click(function(){
    var data = {"name" : "Testing", "email" : "testing@gmail.com", "cpf" : "9876543210"};

    $.ajax({
        type: "POST",
        url: "http://myhost:8080/mypath-rs/rest/beneficiaries",
        data: JSON.stringify(data),
        contentType: "application/json",
    });
    console.log("Loaded");
});

谢谢。

Answer 1

目前我能想到的最佳解决方案是：

$(function() {
    $("#post").click(function() {
        var data = JSON.stringify($("form").serializeObject());
        $("#dataIn").text(data);
        $(function() {
            $.ajax({
                type: "POST",
                url: "http://myhost:8080/mypath-rs/rest/beneficiaries",
                data: data,
                contentType: "application/json",
            });
        });
    });
});

您不需要使用JSON.stringify()两次，因为您已经在.serializeObject()返回值上使用了它。 接下来，将其打印到#dataIn容器中，并通过ajax请求发送。

Answer 2

您可以尝试使用此https://jsfiddle.net/sjc79b55/2/请同时更新<button id="post" type="button">Add </button>行

<form action=""  method="post" class="form-inline">

        <label class="sr-only">Name</label>
        <input type="text" name="name" class="form-control" id="name" placeholder="Name">

        <label class="sr-only">Email</label>
        <input type="text"  name="email" class="form-control" id="email" placeholder="Email">


        <label class="sr-only">CPF</label>
        <input type="text"  name="cpf" class="form-control" id="cpf" placeholder="CPF">

        <button id="post"  type="button">Add </button>
        </form>

        <p >Json Result</p>
        <pre id="dataIn" ></pre>

JS .......

$.fn.serializeObject = function()
    {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };


$(function() {      
    $("#post").click(function() {
       var jsonData = JSON.stringify($(".form-inline").serializeObject());
        $("#dataIn").text(jsonData);
        $(function() {
            //var data = {"name" : "Testing", "email" : "testing@gmail.com", "cpf" : "9876543210"};
           // var data = $("#dataIn").text();
            //alert(jsonData);
            $.ajax({
                type: "POST",
                url: "http://myhost:8080/mypath-rs/rest/beneficiaries",
                data: jsonData,
                contentType: "application/json",
            });

        });
    });
});