0

私は MVC Ajax を jquery ajax に変換する方法を学んでいるので、もっと多くのことができます。

これは古いajaxです。読み込み中のものを取り出しました

@Ajax.ActionLink("Update Tweets", "Index", "Home",
    new AjaxOptions
    {
        UpdateTargetId = "TweetBox",
        InsertionMode = InsertionMode.InsertBefore,
        HttpMethod = "Get",
    })

これをjquery ajaxに変換する必要があります。動作しているようです コードを見てみましょう

<script>
    $(document).ready(function () {
        $("#StartLabel").click(function (e) {

            $.ajax({
                type: "Get",
                url: '/Home/Index',
                //  data: "X-Requested-With=XMLHttpRequest",
                //  contentType: "application/text; charset=utf-8",
                dataType: "text",
                async: true,
                //    cache: false,
                success: function (data) {
                    $('#TweetBox').prepend(data);
                    alert('Load was performed.');
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(textStatus);
                },
                complete: function (resp) {
                    alert(resp.getAllResponseHeaders());
                }
            });
        });
    });
</script>

Microsoft ajax では、ヘッダーに XML Request を設定します。それも追加する必要がありますか？Twitterへのクエリを実行し、データを一番上に追加するコントローラーをページングしているだけです。

リクエストがどのように異なるかを確認するためにフィドラーを使用していますが、結果は同じです。

また、テキストを data: object に入れると、ヘッダーに入れられることに気付きました。私は決してそれが正しいとは思わない。

4

2 に答える 2

0

これは、Jason データで Ajax を使用した簡単な例です。

// Post JSON data
    [HttpPost]
    public JsonResult JsonFullName(string fname, string lastname)
    {
        var data = "{ \"fname\" : \"" + fname  + " \" , \"lastname\" : \"" + lastname + "\" }";
        return Json(data, JsonRequestBehavior.AllowGet);  
    }

ビューで、次の @section Scripts としてクエリへの参照を追加します。{

<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery-1.8.2.intellisense.js"></script>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery-1.8.2.min.js"></script>

}

ビューに js のメモを追加します: (jsonGetfullname).on はボタンです

  <script type="text/javascript"> 
    $("#jsonGetfullname").on("click", function () { 
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "@(Url.Action("JsonFullName", "Home"))",
            data: "{ \"fname\" : \"modey\" , \"lastname\" : \"sayed\" }",
            dataType: "json",
            success: function (data) {
                var res = $.parseJSON(data);
                $("#myform").html("<h3>Json data: <h3>" + res.fname + ", " + res.lastname)
            }, 
            error: function (xhr, err) {
                alert("readyState: " + xhr.readyState + "\nstatus: " + xhr.status);
                alert("responseText: " + xhr.responseText);
            } 
        })
    });
</script>

次のように (POST\GET) を使用することもできます。

[HttpPost]
    public string Contact(string message)
    { 
        return "<h1>Hi,</h1>we got your message, <br />" + message + " <br />Thanks a lot";
    }

ビューに js の注記を追加します: (send).on はボタンです

  $("#send").on("click", function () {
        $.post('', { message: $('#msg').val() })
        .done(function (response) {
            setTimeout(function () { $("#myform").html(response) }, 2000);
        })
        .error(function () { alert('Error') })
        .success(function () { alert('OK') })
        return false;
    });
于 2015-03-06T03:47:14.097 に答える
0

通常のアンカーを定義できます。

@Html.ActionLink("Update Tweets", "Index", "Home", null, new { id = "mylink" })

そして、目立たないように AJAX 化します。

$(document).ready(function () {
    $("#mylink").click(function (e) {
        $.ajax({
            type: "GET",
            url: this.href,
            success: function (data) {
                $('#TweetBox').prepend(data);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(textStatus);
            },
            complete: function (resp) {
                alert(resp.getAllResponseHeaders());
            }
        });

        return false;
    });
});

デフォルト アクションをキャンセルするために、クリック ハンドラから false を返すことに注意してください。また、アンカーの href プロパティをハードコーディングする代わりに使用していることにも注意してください。

2 つの AJAX リクエストは同一である必要があります。

于 2012-04-04T17:07:09.117 に答える