Question

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（数据）是否已经可以执行此操作。

下面的代码完美无缺：

非动态，但正在运作

    $("#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",
            });

        });
    });
});

JSON表单数据为动态提交

2 个答案: