使用Jquery的Ajax调用

最近在学习web开发，试用了一下Jquery的ajax调用。

首先，新建一个MVC4的项目，在HomeController.cs中添加一个Action，命名为GetData, 通过这个为ajax提供数据。

         [AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
         public ActionResult GetData(string id)
         {
             return Content("Hello, " + id + "!");
         }

[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]表示这个可以通过get或者post来调用。

在浏览器中访问
http://localhost:62065/home/getdata/Harry 将会显示


修改View/Home/Index.cshtml

 @{
     ViewBag.Title = "Home Page";
 }

 <input type="text" id="userName" />

 <a href="javascript:void(0);" id="getdata">Click to Show Hello</a>

 <div id="showData">rrrr</div>

 <script type="text/javascript">
     $("#getdata").click(function () {
         $.post("/Home/GetData/" + $("#userName")[].value,     //这里post可以修改修改为get
             {},
             function (data) {
                 alert(data);
                 $("#showData").html(data);
                 //$("#showData")[0].innerHTML = data;
             },
             "html");
     });
     //$(document).ready(function () {
     //    alert("我的id是:" + $("div").attr("id"));
     //})
 </script>

最终显示的效果为

在输入名字，点击“Click to Show Hello”之后， 现在就会先“Hello， 名字!”