使用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")[0].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， 名字!”