由于原生ajax写起来比较麻烦,我未来省事就用的jquery的库。
HTML代码如下:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script src="~/Scripts/jquery-1.10.2.js"></script>
</head>
<body>
<div>
<button id="request" type="button">1111</button>
</div>
<script>
$(function () {
$("#request").click(function () {
$.ajax({
url: "/ajaxdemo/getData",
type:'post',
dataType: "json",
data: {
id: 10,
iCode: 1
},//传递给后台的值
success: function (data) {
console.log(data.iCode);
}
});
})
})
</script>
</body>
</html>
控制器中的代码如下:
using System.Web.Mvc;
namespace AngularJSandMVC.Controllers
{
public class AjaxDemoController : Controller
{
// GET: AjaxDemo
public ActionResult Index()
{
return View();
}
public ActionResult GetData(int id, int iCode)//用于接受前台传过来的值
{
return Json(new { Id=id,iCode=iCode});
}
}
}
在GetData方法中,接受两个参数,其实就是在前台传递过来的值,这是一种简单的写法,还可以写成 Request.Form["id"],这就看个人的喜好了。在返回的时候,
return Json(object,JsonRequestBehavior.AllowGet),第二个参数为可选参数。这里Json是ActionResult的子类,这儿运用了多态。然后我们把视角切换回前台的回调函数,data就是返回的数据,回调函数可以有多个参数,我这儿写的是最简单的,其余的用法,w3也有demo。然后我们就可以进行相应的DOM操作实现页面的部分刷新。