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
});

除点之外,所有其他参数都可以正常工作.这是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'}]}"

关于我应该做什么的任何线索？

解决方法

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

$.ajax的工作原理是因为从getExcelDataPoints(points)返回的字符串是一个JSON对象,其属性名为Points,这与您的action参数直接匹配.它采用这种格式：{…}.当您将该对象放在input元素中时,它会更改为更像这种格式：“{…}”,这是一个字符串.

这个设置的另一个不太重要的问题是getExcelDataPoints(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'}]" />
    <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'}]},function (data) {
            alert(data);
        });
        event.preventDefault();
    });
</script>

Home / About操作已更改如下：

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

    return Json("hello");
}

这证实它是一个字符串.你可以使用各种方法shown here向一个动作提交一个列表,所以我想我会破解一些快速的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>