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

API POST call with large model, need some guidance

本文关键字：模型 调用 POST 大型 API      更新时间：2023-09-26

我有一个相当大的表单(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'); }
            });
        });

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的表单字段听起来相当大。您可能想重新考虑您的设计，但也许有一个有效的用例)

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>
相关文章：