使用jQuery提交带有JSON数据的表单

Question

简而言之，我们有特定的要求。即将某些数据放入表单元素中并提交表单。我们这样做的原因是为了打开一个新窗口返回Excel电子表格，但我们需要向表单请求提供参数。

基本上，我的数据点（JavaScript中的clickPoints变量）没有传递到服务器端的操作方法，但它在表单请求中存在。

如下所示：

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

除了点数以外，所有其他参数都正常工作。以下是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;
}

您可能会想知道为什么我要手动构建它。原因有几个。问题在于，当使用jquery进行$.ajax请求时，这绝对有效，所以我知道格式绝对没问题。但是，当像上面的第一个代码清单那样执行时，它不起作用。

这是服务器上的操作定义;

[HttpPost]
public IList<AISExcelPosition> ExcelExport(LatLng[] Points, GeomType GeomType, DateTime StartDate, DateTime EndDate)
{
     var poo = Request.Form["Points"];
        // Magical.... UNICORNS!
        /* 
             `\
               \\,
                \\\,^,.,,.
                ,;7~((\))`;;,,
                ,(@') ;)`))\;;',
                 )  . ),((  ))\;,
                /;`,,/7),)) )) )\,,      ,,,... ,
               (& )`   (,((,((;( ))\,_,,;'`    `\\,
                `"    ` ), ))),/( (            `)\,
                       '1/';/;  `               ))),
                        (, (     /         )    ((/,
                       / \                /     ((('
                      ( 6--\%  ,>     ,,,(     /'))\'
                       \,\,/ ,/`----~`\   \    >,))))'
                         \/ /          `--7>' /((((('
                         (,9             // /'('((\\\,
                          \ \,,         (/,/   '\`\\'\
                           `\_)1        (_)Kk    `\`\\`\
                             `\|         \Z          `\
                               `          "            `

         */

是的。我在我的代码中有一只宠物独角兽。

你会看到我们塞进去的var poo = Request.Form["Points"];，这向我们证明了数据确实存在，并且格式良好（在底层POST请求中观察表单数据后）。

以下是实际的JSON数据：

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

你有什么线索吗？我应该做什么？

- Kieran Senior

---

“它不起作用”是什么意思？我真的无法理解你在问什么或者你的问题出在哪里。 - Marcel Jackwerth

+1 为拥有宠物独角兽。 - Jishnu A P

@Marcel Jackwerth：服务器端的Points变量从未有过值，它始终为null。 - Kieran Senior

你能把你的HTML表单贴出来吗？ - Marcel Jackwerth

请问您能否发布一个Cyclops？ - Prisoner ZERO

Answer 1

我最好的猜测是你的点被传递到服务器作为字符串值，而不是被解释为JSON。

$.ajax 起作用是因为从 getExcelDataPoints(points) 返回的字符串是一个带有属性 Points 的 JSON 对象，这直接匹配到了你的操作参数。它的格式有点像这样：{ ... }。当你把这个对象放在输入元素中时，它会变成更像这种格式："{ ... }"，这是一个字符串。

另一个不太重要的问题是，getExcelDataPoints(points) 生成了属性名 Points，然后你把它放在了你的字段中，这个字段也被命名为 Points，这给你多了一个包装器，所以值看起来更像是 Points.Points[] 而不仅仅是 Points[]。

为了测试是否可以在常规表单提交中发送JSON数据，我设置了一个快速的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>

首页/关于 页面的操作已更改如下：

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

    return Json("hello");
}

这证实它被识别为字符串。您可以使用各种方法（此处显示）向操作提交列表，因此我想我会编写一些快速的js来将您的JSON格式化为表单元素，这对于您正在做的事情非常有效。虽然不太美观，但如果您被迫使用表单提交，它将起作用（或者正如Kevin所说，我将向您展示如何开枪射自己的脚，但您必须决定是否这样做）：

@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>

- Nick Larsen