在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'}]}" 

什麼我應該做的任何線索？

Answer 1

我最好的猜測是你的觀點是作爲一個字符串值被傳遞到服務器，而不是被解釋爲JSON。

$.ajax工作原理是因爲從getExcelDataPoints(points)返回的字符串是一個名爲Points的JSON對象，它直接匹配您的操作參數。這是這種格式：{ ... }。將該對象放入輸入元素中時，它會更改爲如下格式："{ ... }"，這是一個字符串。

另一個遠不如重要的問題，這種設置是getExcelDataPoints(points)正在生成屬性名Points然後你拿這一點，把它放在你的領域也被命名爲Points，給你一個額外的包裝內，以便值看起來更像Points.Points[]而不僅僅是Points[]。

爲了測試，如果你能在正規的形式發送JSON數據提交，我設立了一個快速MVC3項目，改變了家庭/索引視圖有下面的代碼：

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

而且這證實它是作爲一個字符串出現的。你可以使用各種方法將一個列表提交給一個動作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>