2

jQueryのajax呼び出しでデータを送信しようとしています。私の質問は、ファイルでこの JSON 配列を取得するにはどうすればよいですか? Insert.cshtmlRequest["rows"]、などを試しRequest[0][rows]ましたが、成功しませんでした。

ここで、送信しようとしているデータは次のとおりです (複数行のフォーム データ)。

[
    {
        "sl": "1",
        "tname": "Gardening",
        "ttype": "4",
        "tduration": "12"
    },
    {
        "sl": "2",
        "tname": "Nursing",
        "ttype": "4",
        "tduration": "45"
    }
]

jQuery コード:

$.ajax({
    type: "POST",
    url: "/Insert",
    data: rows,
    contentType: "application/json",
    success: function (data, status) {
        alert(status);
    },
    error: function (xhr, textStatus, error) {
        var errorMessage = error || xhr.statusText;
        alert(errorMessage);
    }
});

更新: jsfiddle の部分的なデモ- http://jsfiddle.net/rafi867/gprQs/8/

4

3 に答える 3

1

App_Code で Sample.cs クラスを作成する問題をシミュレートしようとしました。

public class Sample
{
    public string sl { get; set; }
    public string tname { get; set; }
    public string ttype { get; set; }
    public string tduration { get; set; }
}

Insert.cshtml ファイルは次のようになります。

@{
    var sample = new Sample[]{
    new Sample{ sl = "1", tname = "Gardening", ttype = "4", tduration = "12" },
    new Sample{ sl = "2", tname = "Nursing", ttype = "4", tduration = "45" }
    };
    Json.Write(sample, Response.Output);
}

Sample オブジェクトを保持するファイル (ReadSample.cshtml?) は次のようになります。

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="~/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $.getJSON('/Insert', function (sample)
            {
                var custList = "";
                $.each(sample, function (index, obj) {
                        custList += "<li>" + obj.sl + " - " + obj.tname + 
                                " - " + obj.ttype + " - " + obj.tduration + "</li>";
                })
                $("#list").html("<ul>" + custList + "</ul>")
            })
        </script>
    </head>
    <body>
        <div id="list"></div>
    </body>
</html>

私の例では、オブジェクト配列を次のように読みました

$.getJSON('/Insert', function (sample)

そのコンテンツを表示するための順序付けられていないリストを作成しました

$.each(sample, function (index, obj) {
        custList += "<li>" + obj.sl + " - " + obj.tname + 
                " - " + obj.ttype + " - " + obj.tduration + "</li>";
})
$("#list").html("<ul>" + custList + "</ul>")

これが役立つことを願っています。

于 2012-12-18T13:39:54.497 に答える
0

data パラメーターは、ドキュメントでわかるように、名前と値のペアをクエリ文字列パラメーターにマップすることを目的としています。

データ

サーバーに送信されるデータ。まだ文字列でない場合は、クエリ文字列に変換されます。GET リクエストの URL に追加されます。この自動処理を防ぐには、processData オプションを参照してください。オブジェクトはキーと値のペアである必要があります。value が配列の場合、jQuery は従来の設定 (以下で説明) の値に基づいて、同じキーで複数の値をシリアル化します。

次にメソッドのドキュメントを読む.param()と、リクエストで何が起こっているのか、jQuery がオブジェクトをサーバーに送信する方法を理解するのに役立ちます。

dataオブジェクト内でオブジェクト/配列を参照できるように、オブジェクト内のオブジェクト/配列に名前を付ける必要がある場合がありRequest.Formsます。

于 2012-12-17T17:36:34.973 に答える
0

jqueryとcssを使ってWebページに配列項目を表示する方法を示すサンプルコードを載せました。これを使用して概念を理解し、それをシナリオに適用してみてください。

HTML

 <div class="dialog" id="unpaid-dialog" data-width="550" data-title="Checkout">
        <ul>
            <li id="serviceAndRetailDetails" style="text-align: left;"></li>
        </ul>
    </div>

Jクエリ

<script type="text/javascript">


    var toBePaidItems = new Array();//create a array
    var make = "";

    $.ajax({
        type: "GET",
        url: "/Portal/GetServiceAndRetailSalesDetails",
        dataType: 'json',
        contentType: "application/json; charset=UTF-8",
        data: { invoiceOrSaleId: invoiceOrSaleId, providerKey: providerKey },
        success: function (response) {
            make = "<table id='tblPayment'>";
            toBePaidItems = [];

            $.each(response, function (index, sr) {

                make += "<tr id=" + sr.AllocationOrInvoiceOrSaleId + " class=" + sr.Class + ">" + "<td style='padding-right:100px'>" + sr.Name + "</td><td class='colTotal' style='padding-right:45px'>" + '$ ' + sr.Price.toFixed(2) + "</td><td></tr>";

                //insert into array
                toBePaidItems.push(sr.AllocationOrInvoiceOrSaleId);
            });

            make += "</table>";
            $("#serviceAndRetailDetails").html(make);
        }
    });

</script>

コントローラ アクション メソッド

[HttpGet]
public JsonResult GetServiceAndRetailSalesDetails(Guid invoiceOrSaleId, string providerKey)
        {

            var items = new List<CheckOutServiceAndRetailItem>();

            var serviceDetails = Repository.GetAllPayableItems(invoiceOrSaleId).ToList();

            foreach (var s in serviceDetails)
            {
                var item = new CheckOutServiceAndRetailItem
                {
                    AllocationOrInvoiceOrSaleId = s.Allocation.AllocationId,
                    Name = s.Allocation.Service.Name,
                    Price = s.LatestTotal,
                    Class = s.Allocation.Service.IsAnExtra,
                };
                items.Add(item);
            }

            return Json(items, JsonRequestBehavior.AllowGet);
        }

配列出力

ここに画像の説明を入力

ここで配列を操作する方法

これがあなたに役立つことを願っています。

于 2012-12-17T16:12:51.190 に答える