我們做任何系統都少不了前后台數據的交互，在PHP中，我們基本不會遇到前后台數據交互的問題，純PHP就可以實現了。但是在.net里面我們通常要借助Ajax技術。通過這段時間的學習，這里也將jquey的Ajax技術應用到MVC框架中，與大家分享。同時時間有限，不能將各個場景都一一例舉。
1 jQuery中的Ajax復習
“工欲善其事，必先利其器。”這里簡單介紹一下jQuery中的Ajax中常用的方法。
1.1 $.ajax()方法
$.ajax()方法是jQuery最底層的Ajax實現。
其結構為：
該方法只有一個參數，但在這個對象里包含了$.ajax()所需的請求設置和回調函數等信息。
參數以key/value形式存在，所有參數都是可選的，常用參數如下表：
1.2 $.get()方法
$.get()方法使用GET方式來進行異步請求
它的結構：
$.get()方法參數解釋如下：
1.3 $.post()方法
它與$.get()方法的結構和使用方法都相同，不過它們之間仍然有差別，這里不解釋（需要的朋友請查閱相關資料進一步了解）
1.4 $.getJSON
方法定義：jQuery.getJSON( url, data, callback )
通過get請求得到json數據
·url用於提供json數據的地址頁
·data(可選)用於傳送到服務器的鍵值對
·callback(可選)回調函數，json數據請求成功后的處理函數
復習了jquery的Ajax之后我們就可以開始了。
2 實例
2.1 $.ajax()方法
照例，我們先在建立一個控制器命名為HomeController
同時視圖的Home目錄下新建一個名為Index的視圖，
結構如下：
視圖設計：
View Code
<tr>
<td>
<input id="Access" type="button" value="Access" />
</td>
<td>
<div id="browser">
</div>
</td>
</tr>
腳本：
View Code
$("#Access").click(function () {
$.ajax({
type: 'GET',
url: '/Home/Get_Page',
success: function (data) {
$("#browser").text(data);
}
});
});
控制器中Action：
View Code
//返回數據
public void Get_Page()
{
List<string> booklist = new List<string>();
booklist.Add("C#");
booklist.Add("J#");
booklist.Add("jQuery");
booklist.Add("JavaScript");
booklist.Add("PHP");
foreach(string str in booklist)
{
Response.Write(str+"<br>");
}
}
效果：
2.2 $.post()
視圖設計:
<tr>
<td>
<input id="btn" type="submit" value="發送數據" />
</td>
<td>
<div id="result">
</div>
</td>
</tr>
腳本：
View Code
$("#btn").click(function () {
$.post('/Home/Page_To',
{ text: 'Lucky Hu', number: 24 },
function (data) {
alert('Your data have been saved!');
$("#result").text(data); //用div接收返回的數
});
});
控制器中Action:
View Code
//接收數據
public void Page_To()
{
string name = Request["text"];//
string age = Request["number"];
Response.Write("返回結果是:姓名:"+name+",年齡:"+age);//返回到前台數據
}
效果：
2.3 $.getJSON()
視圖設計：
View Code
<input id="studentInFo" type="button" value="獲取學生信息" />
<table id="Student">
<thead>
<tr>
<td>
姓名
</td>
<td>
年齡
</td>
<td>
性別
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
腳本：
View Code
//異步請求JSON格式數據
$("#studentInFo").click(function () {
$.getJSON("/Home/Get_Json",
function (data) {
/*遍歷*/
$.each(data,
function (index, p) {
var html = "<tr><td>" + p.Name + "</td>" + "<td>" + p.Age + "</td>" + "<td>" + p.Sex + "</td>" + "</tr>";
$("#Student tbody").append(html);
//alert(html);
})
});
})
控制器中Action:
View Code
//構造Json格式數據
//異步請求JSON 數據
public JsonResult Get_Json()
{
List<Student> slist = new List<Student>();
DataTable dt = CreateData();
for (int i = 0; i < dt.Rows.Count;i++ )
{
Student s = new Student();
s.Name = dt.Rows[i]["name"].ToString();
s.Age = int.Parse(dt.Rows[i]["age"].ToString());
s.Sex = dt.Rows[i]["sex"].ToString();
if (s != null)
{
slist.Add(s);
}
}
//JsonRequestBehavior.AllowGet 表示允許以GET方式訪問,
//最后在頁面中用getJSON()方法獲取
return Json(slist,JsonRequestBehavior.AllowGet);
}
//構造測試數據
public DataTable CreateData()
{
DataTable dt = new DataTable();
dt.Columns.Add("name",typeof(string));
dt.Columns.Add("age", typeof(int));
dt.Columns.Add("sex", typeof(string));
for (int i = 0; i < 10;i++ )
{
dt.Rows.Add(new object[] {"lucky"+i,"2"+i,"男"});
dt.AcceptChanges();
}
return dt;
}
這里為了更加真實的展現這場景，添加了一個model實體，命名為Student
效果：
3 總結
jquery的Ajax在.NET數據交互中的應用很廣泛，這里只是很常見的一些用法，實際中應用更加靈活多變。
平日由於需求的局限，自己的應用並沒有達到一定深度，我想隨着新項目，新需求的出現，將還會有更加深入的理解和應用。