使用jQuery.Ajax向ASP.NET MVC控制器Post數據
編輯：AJAX詳解
jQuery自帶了AJax的函數，你可以使用它從遠程服務器下載網頁，但問題是，大部分AJax都是通過GET這種方式與遠程服務器交互的。
但如果你想通過AJax向遠程服務器傳遞數據呢？當然jQuery.AJax裡面有一個參數data參數允許你傳遞發送到服務器的數據。 但問題是，這個數據默認是采用GET方式，即附加在請求字符串（URL QueryString）後面實現的，也就是說你會受到URL最大不能超過4KB的限制。而如果你嘗試用POST方法向ASP.Net MVC控制器發送數據的時候，在控制器一端，你會發現數據沒有傳入到控制器上。比如說下面的jQuery代碼：
代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
<Html XMLns="http://www.w3.org/1999/xHtml" >
<head>
<title>Tools</title>
<link href="http://ajax.googleapis.com/AJax/libs/jqueryui/1.8/themes/base/jquery-ui.CSS" rel="stylesheet" type="text/CSS"/>
<LINK rel="stylesheet" href="http://jqueryui.com/demos/demos.CSS" />
<script type="text/Javascript" src="Scripts/jquery-1.4.2.min.JS"></script>
<script type="text/Javascript" src="Scripts/jquery-ui-1.8.6.custom.min.JS"></script>
<script type="text/Javascript" src="Scripts/tinymce/tiny_mce.JS"></script>
<script type="text/Javascript" src="Scripts/tinymce/jquery.tinymce.JS"></script>
</script>
<script language="Javascript" type="text/Javascript">
var editor_selector = "#note_editor";
var annotation_catalog_url = '/Comment/Save';
function show_annotation_dialog() {
$(editor_selector).tinymce({
mode: "textareas",
theme: "simple"
});
}
function save_handler() {
if (tinyMCE.get('note_editor')) {
var Html = tinyMCE.get('note_editor').getContent();
var comment = {
Id: -1,
User: '',
PageUrl: '' + window.location.href,
Content: Html
};
$.AJax({
url: annotation_catalog_url,
type: 'POST',
dataType: 'JSon',
data: comment,
contentType: 'application/JSon; charset=utf-8',
success: function (data) {
if (data != null)
$('#result').Html(data.Message);
}
});
}
}
$(document).ready(function () {
$('#submit').click(save_handler);
});
</script>
</head>
<body>
<div id="note_editor">
</div>
<input type="button" value="提交" id="submit" />
<div id="result">
</div>
</body>
點擊提交後，在控制器一端根本沒有被調用，這是因為雖然你的jQuery代碼指明了數據類型是JSon，但是數據格式並不是JSon格式的。你需要將對象序列化成JSon格式，使用json2.JS就可以做這個事情，下載地址是：http://www.json.org/JS.Html 。
代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd"><Html XMLns="http://www.w3.org/1999/xHtml" >
<head>
<title>Tools</title>
<link href="http://ajax.googleapis.com/AJax/libs/jqueryui/1.8/themes/base/jquery-ui.CSS" rel="stylesheet" type="text/CSS"/>
<LINK rel="stylesheet" href="http://jqueryui.com/demos/demos.CSS" />
<script type="text/Javascript" src="Scripts/jquery-1.4.2.min.JS"></script>
<script type="text/Javascript" src="Scripts/jquery-ui-1.8.6.custom.min.JS"></script>
<script type="text/Javascript" src="Scripts/tinymce/tiny_mce.JS"></script>
<script type="text/Javascript" src="Scripts/tinymce/jquery.tinymce.JS">
<script type="text/Javascript" src="Scripts/json2.JS"></script>
</script>
</script>
<script language="Javascript" type="text/Javascript">
var editor_selector = "#note_editor";
var annotation_catalog_url = '/Comment/Save';
function show_annotation_dialog() {
$(editor_selector).tinymce({
mode: "textareas",
theme: "simple"
});
}
function save_handler() {
if (tinyMCE.get('note_editor')) {
var Html = tinyMCE.get('note_editor').getContent();
var comment = {
Id: -1,
User: '',
PageUrl: '' + window.location.href,
Content: Html
};
$.AJax({
url: annotation_catalog_url,
type: 'POST',
dataType: 'JSon',
data: JSON.stringify(comment),
contentType: 'application/JSon; charset=utf-8',
success: function (data) {
if (data != null)
$('#result').Html(data.Message);
}
});
}
}
$(document).ready(function () {
$('#submit').click(save_handler);
});
</script>
</head>
<body>
<div id="note_editor">
</div>
<input type="button" value="提交" id="submit" />
<div id="result">
</div>
</body>
如果你在服務器的控制器一端，發生數據沒有被正確地反序列化（如果你用ASP.Net MVC 3 RC之前的版本應該就會碰到這個問題）。這是因為雖然客戶端指明了數據是JSon對象，但是，服務器MVC路由器不知道如何解釋這個對象，要在服務器端加上JSon反序列化支持，請在global.asax.cs的Application_Start()函數裡，添加下面一行代碼（表示你要支持JSon反序列化）：
在ASP.Net MVC 3 RC以後的版本就不需要添加這一行代碼了。
- 上一頁:AJAX異步調用WebService
- 下一頁:Ajax刪除效果
小編推薦
熱門推薦