实现基本的Ajax和Json请求

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前面已经封装好了一个方法ajax()，通过这个方法可以实现Ajax请求，接下来就是给出

例程来测试这个方法和实现简单的功能。

视图的部分代码如下：

<body>
<div>
the Numger is : <br /><label id="number"> </label> <br />
the Students' Infomation:<br /><label id="studentInfo"> </label> <br />
<input type="button" value="请求数字(ajax请求)" onclick='requestNumber()'/>
<label> </label>
<input type="button" value="请求学生信息(json请求)" onclick="requestStudentInfo()" />
</div>
</body>

功能一：浏览器向服务器请求一个数字（通过ajax实现）

视图代码中添加脚本代码：

后台服务器代码：

//ajax请求的action方法
public void Get_Number()
{
int num =;
Response.Write(num);
return;
}

功能二：浏览器向服务器请求一个学生的信息（通过Json实现）

视图代码中添加脚本代码：

//请求学生信息
function requestStudentInfo() {
ajax("POST","/Home/Get_Student", function (resText) {
//将序列化的字符串内容进行解析，得到Js对象
var student = JSON.parse(resText);
var text="";
text += "学号：" + student.StuId + "<br />";
text += "姓名：" + student.Name + "<br />";
text += "性别：" + student.Gender + "<br />";
text += "年龄：" + student.Age + "<br />" $("studentInfo").innerHTML = text;
});
}

代码中使用到了一个方法JSON.parse(),该方法是将返回的序列化字符串解析成一个对象或者对象集合，
因此需要添加js库--json2.js,如下：

<script src="../../Scripts/json2.js" type="text/javascript"></script>

后台服务器代码：

//json请求的action方法
public JsonResult Get_Student()
{
Student student = new Student(, "张三","男",);
return Json(student); //Json()方法将一个对象或者对象集合进行序列化
}

运行结果：