JSON表单数据作为动态提交答案

【问题标题】：JSON form data as dynamic submitJSON表单数据作为动态提交
【发布时间】：2016-09-20 12:03:14
【问题描述】：

AJAX 帖子在传递预定义数据时起作用，如下所示：

//var data = {"name" : "Testing", "email" : "testing@gmail.com", "cpf" : "9876543210"};

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

请帮我解决这个问题。

POST 功能

$.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");
});

谢谢。

【问题讨论】：

将 var data 修复为 var data = $("#dataIn").text() 并重试。

标签： javascript jquery json ajax

【解决方案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 请求发送。

【讨论】：

【解决方案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",
            });

        });
    });
});

【讨论】：