Javascript 在jQuery中提交包含JSON数据的表单

简而言之，我们有具体的要求。也就是说，将某些数据放入表单元素中，然后提交表单。我们这样做的原因是打开一个新窗口以返回excel电子表格，但我们需要为表单请求提供参数

基本上，我的数据点（javascript中的clickPoints变量）不会传递给服务器端的action方法，而是以请求的形式传递

详情如下:

$("#excel").click(function() {
    $("#Points").val(getExcelDataPoints(clickPoints));
    $("#GeomType").val("LINESTRING");
    $("#StartDate").val($("#start-date").val());
    $("#EndDate").val($("#end-date").val());
    $("#ExcelExport").submit(); // this is the form which I want to submit
});

[HttpPost]
public ActionResult About(LatLng[] Points)
{
    var poo = Request.Form["Points"];

    return Json("hello");
}

除了点之外，所有其他参数都可以正常工作。下面是getExcelDataPoints的定义

function getExcelDataPoints(points)
{
    var data = "{'Points': [";

     for(var i = 0; i < points.length; i++) {
         data += "{'Da': '" + points[i].lat() + "', 'Ea': '" + points[i].lng() + "'},"; 
     }

     data = data.substr(0, data.length - 1);
     data += "]}";

     return data;
}

对。我的密码里有一只宠物独角兽

您将看到

var poo=Request.Form[“Points”]位向我们证明了（并且在观察了底层POST请求中的表单数据之后）数据确实在那里，所有这些数据的格式都很好

以下是实际的JSON数据：

"{'Points': [{'Da': '49.45995313552066', 'Ea': '-2.5134216308593977'},{'Da': '49.45894893804116', 'Ea': '-2.5134216308593977'}]}"

有关于我应该做什么的线索吗？
我最好的猜测是，您的点是作为字符串值传递到服务器的，而不是被解释为JSON

$.ajax
之所以有效，是因为从
getExcelDataPoints（points）
返回的字符串是一个JSON对象，其属性名为
points
，它直接匹配到您的操作参数。它的格式是：
{…}
。当您将该对象放置在输入元素中时，它将更改为更像以下格式：
“{…}”
，这是一个字符串

此设置的另一个不太重要的问题是
getExcelDataPoints（points）
正在生成属性名
points
，然后将其放入名为
points
的字段中，给您一个额外的包装器，使值看起来更像
points.points[]
而不仅仅是
点[]

为了测试是否可以以常规形式提交JSON数据，我设置了一个quick MVC3项目，并修改了Home/Index视图，使其具有以下代码：

@using (Html.BeginForm("About", "Home"))
{
    <input type="hidden" name="Points" value="[{'Da': '49.45995313552066', 'Ea': '-2.5134216308593977'},{'Da': '49.45894893804116', 'Ea': '-2.5134216308593977'}]" />
    <input type="submit" />
}

<a id="jason">Run The Query!</a>

<script type="text/javascript">
    $('#jason').click(function (event) {
        $.post('@Url.Action("About")', {'Points': [{'Da': '49.45995313552066', 'Ea': '-2.5134216308593977'},{'Da': '49.45894893804116', 'Ea': '-2.5134216308593977'}]}, function (data) {
            alert(data);
        });
        event.preventDefault();
    });
</script>

这证实了它是一根弦。您可以使用各种方法向操作提交列表，因此我想我应该编写一些快速js来将JSON格式化为表单元素，这些元素可以用于您正在做的事情。这并不漂亮，但如果你被迫使用表单提交，它会起作用（或者，正如我所说的，我将向你展示如何射中你自己的脚，但你必须做出这样做的决定）：

@使用（Html.BeginForm（“About”，“Home”，FormMethod.Post，new{@class=“point maker”}））
{
}
$（函数（）{
变量点=[{'Da'：'49.45995313552066'，'Ea'：'-2.5134216308593977'，{'Da'：'49.45894893804116'，'Ea'：'-2.5134216308593977}]；
变量形式=$（'.point maker'）；
对于（以点为单位的var指数）{
var点=点[指数]；
append（CraftHiddenPoint（index，point.Da，point.Ea））；
}
});
功能点（索引、da、ea）{
返回美元（“”）；
}
你说的“它不工作”是什么意思？我真的不明白你在问什么/你的问题在哪里。+1用于饲养宠物独角兽。@Marcel Jackwerth:服务器端的Points变量从来没有值，它总是空的。你能一起发布你的html表单吗？你能发布一个Cyclops吗？
[HttpPost]
public ActionResult About(LatLng[] Points)
{
    var poo = Request.Form["Points"];

    return Json("hello");
}

@using (Html.BeginForm("About", "Home", FormMethod.Post, new { @class = "point-maker" }))
{
    <input type="submit" />
}

<script type="text/javascript">
    $(function () {
        var points = [{ 'Da': '49.45995313552066', 'Ea': '-2.5134216308593977' }, { 'Da': '49.45894893804116', 'Ea': '-2.5134216308593977'}];
        var form = $('.point-maker');
        for (var index in points) {
            var point = points[index];
            form.append(CraftHiddenPoint(index, point.Da, point.Ea));
        }
    });
    function CraftHiddenPoint(index, da, ea) {
        return $('<input type="hidden" name="Points[' + index + '].Da" value="' + da + '" /><input type="hidden" name="Points[' + index + '].Ea" value="' + ea + '" />');
    }
</script>