將MVC Ajax轉換爲jquery

我正在學習如何將MVC Ajax轉換爲jquery ajax，以便我可以做更多。將MVC Ajax轉換爲jquery

這是老阿賈克斯，我拿出裝東西

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

我需要將其轉換爲jQuery的阿賈克斯。它似乎在工作，讓我們看看代碼

<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>

在微軟AJAX它設置標頭中的XML請求。我需要添加嗎？我只是分頁我的控制器，執行一個查詢到twitter並將數據追加到頂部。

我使用小提琴來查看請求是如何不同，但結果是相同的。

我也注意到，如果我把文本放在data：object中，它會把它放在標題中。我不認爲這是正確的。

來源

2012-04-04 Michael Hahn

你可以定義一個正常的錨：

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

然後悄悄地AJAXify它：

$(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-04 17:07:09

讓我掏更深一點。我需要實現jnoifier插件和定時器/彗星式反向ajax解決方案，但我正在建設中。當我建議我使用jQuery Ajax時，我決定使用jnotifier，因爲我實現了額外的功能。 – 2012-04-04 17:21:14

下面是使用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("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-06 03:47:14 mahmoud

將MVC Ajax轉換爲jquery

回答

相關問題