将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

回答

相关问题