ASP+AJAX(Jquery) 結合使用範例
Downcodes小編今天帶給大家一個十分簡單的ASP+AJAX(Jquery) 結合使用範例,特別適合初學者學習使用。
範例程式碼
以下範例展示了四種常用的AJAX 請求方式,分別為:
1. $.ajax()
2. $.post()
3. $.get()
4. $.getJSON()
1. $.ajax()
`html
$(document).ready(function(){
$("#btn1").click(function(){
$.ajax({
url: "ajax.asp",
type: "POST",
data: {name: "Downcodes", city: "北京"},
success: function(result){
$("#div1").html(result);
}
});
});
});
`
2. $.post()
`html
$(document).ready(function(){
$("#btn2").click(function(){
$.post("ajax.asp", {name: "Downcodes", city: "北京"}, function(result){
$("#div2").html(result);
});
});
});
`
3. $.get()
`html
$(document).ready(function(){
$("#btn3").click(function(){
$.get("ajax.asp", {name: "Downcodes", city: "北京"}, function(result){
$("#div3").html(result);
});
});
});
`
4. $.getJSON()
`html
$(document).ready(function(){
$("#btn4").click(function(){
$.getJSON("ajax.asp", {name: "Downcodes", city: "北京"}, function(result){
$("#div4").html("姓名:" + result.name + "
城市:" + result.city);
});
});
});
`
ASP 程式碼範例(ajax.asp)
`asp
<%
Response.ContentType = "text/html; charset=utf-8"
Dim name, city
name = Request.Form("name")
city = Request.Form("city")
' 輸出JSON 格式數據
Response.Write("{""name"": """ & name & """, ""city"": """ & city & """}")
%>
`
說明
上述程式碼中的ajax.asp 檔案需要放置在與HTML 檔案相同的目錄下。
$.ajax() 函數是AJAX 請求的核心,可以自訂各種請求參數。
$.post() 和$.get() 函數是AJAX 請求的簡化方式,分別對應POST 和GET 請求。
$.getJSON() 函數用於取得JSON 格式的資料。
ASP 程式碼範例中,Request.Form 用來取得AJAX 請求傳遞的參數。
透過這個範例,你應該能夠了解如何將ASP 與AJAX(Jquery) 結合使用,並使用不同的AJAX 請求方式來實現資料互動。
總結
ASP+AJAX(Jquery) 的結合使用能夠使網站更加動態化,為使用者提供更好的互動體驗。希望這個範例能幫助你更能理解並運用ASP+AJAX(Jquery)。