Question

我有一个相当大的表单（50个字段），我需要将它传递给API调用。

在javascript文件中执行此操作非常大，可以将表单上的所有数据序列化为正确的模型。

是否可以调用控制器，并使用该模型将其传递给api url？

基本上我想知道一种简单的方法来获取表单数据并根据我的模型将其转换为序列化数据。

谢谢！

编辑：简单的意思是我不必采用每个表单输入并使用它们创建我的模型

我的代码现在基本上就是这个，但是我需要填写一堆字段（我没有尝试过任何其他方式）

 $("#submit").click(function () {
            var name = $("#Name").val();
            var address = $("#Address").val();
            var dob = $("#DOB").val();
            $.ajax({
                url: "http://localhost:49493/api/Values",
                type: "Post",
                data: JSON.stringify([name, address, dob]), 
                //instead of 3 fields, I would have 50
                contentType: 'application/json; charset=utf-8',
                success: function (data) { },
                error: function () { alert('error'); }
            });
        });

Answer 1

jQuery有一个可以使用$（“＃myForm”）的函数.serialize（）

http://api.jquery.com/serialize/

$("#submit").click(function () {
            var myData = $("#myForm").serialize() 
            $.ajax({
                url: "http://localhost:49493/api/Values",
                type: "Post",
                data: myData, 
                //instead of 3 fields, I would have 50
                contentType: 'application/json; charset=utf-8',
                success: function (data) { },
                error: function () { alert('error'); }
            });
        });

（虽然50表格字段听起来很大。你可能想重新考虑你的设计，但也许有一个有效的用例）

Answer 2

javascript MV *框架在这里很有用（我最熟悉的是angular）。使用angular，您可以定义UI元素与底层javascript模型表示之间的绑定（可以使用$ http服务将其发送到Web API）。

这是一种语言无关的方法来迭代元素并构建模型。它做得很快而且很脏，并且有很大的改进空间（即使用addEventListener，attachEvent，然后onclick等） - 但是jquery会为你处理大部分内容，所以建议坚持使用它。这可以很容易地转换为jQuery ... javascript迭代输入元素并将它们添加到模型对象。如果需要，可以通过AJAX发送此对象。该示例只是将其输出到div占位符。

http://jsfiddle.net/T9MyZ/

JavaScript的：

document.getElementById("submitMe").onclick = function () {
    var inputs = document.getElementsByTagName("input");
    var model = {};
    for (var i = 0, len = inputs.length; i < len; i++) {
        var elem = inputs[i];
        model[elem.name] = elem.value;
    }

    document.getElementById("jsonText").innerHTML = JSON.stringify(model);
};

HTML：

<input type="text" name="name"><br>
<input type="text" name="address"><br>
<input type="text" name="dob"><br>
<button id="submitMe">Submit</button>
<br>
<div id="jsonText"></div>

API POST调用大型模型，需要一些指导

2 个答案: