将 MVC Ajax 转换为 Jquery答案

【问题标题】：Converting MVC Ajax to Jquery将 MVC Ajax 转换为 Jquery
【发布时间】：2012-04-04 16:19:30
【问题描述】：

我正在学习如何将 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 请求。我也需要添加吗？我只是在分页我的控制器，它对 twitter 执行查询并将数据附加到顶部。

我正在使用 fiddler 来查看请求有何不同但结果相同。

我还注意到如果我将文本放入数据中：对象将其放入标题中。我不认为这是对的。

【问题讨论】：

标签： ajax asp.net-mvc-3 jquery asp.net-ajax

【解决方案1】：

你可以定义一个普通的锚：

@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 请求应该是相同的。

【讨论】：

让我再深入一点。我需要实现 jnoifier 插件和计时器/彗星风格的反向 ajax 解决方案，但我正在构建。当有人建议我使用 jquery ajax 时，我由 jnotifier 负责，因为我实现了额外的功能。

【解决方案2】：

这是使用 Ajax 和 Jason 数据的简单示例

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

在视图中添加对查询的引用，如下所示 @section 脚本{

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

【讨论】：