java js webservice_java Web技术探路：js Ajax调用WebService
StuList = new List();
for (int i = 0; i < 10; i++)
{
Student s = new Student();
s.Sid = i + 1;
s.Name = "Tom"+s.Sid;
s.Sex = "男";
s.Age = i + 1;
StuList.Add(s);
}
return StuList;
}
}
}
注意：我們分別看一下這幾個方法的簽名，這很重要，因為方法簽名決定了你調用必須遵守的規則，本文中我們用的是post方法，所以只給出post的方法簽名。
1.HelloWebService
說明：請求的頁面的地址: /MyWebService.asmx/HelloWebService;主機地址為:192.168.0.194;端口號：如果不是80端口，必須給出。
調用該服務的完整路徑為：http://192.168.0.194:85/MyWebService.asmx/HelloWebService 。(具體情況，具體分析)
2.HelloSomeBody
說明：請求的頁面的地址: /MyWebService.asmx/HelloSomeBody;主機地址為:192.168.0.194;端口號：如果不是80端口，必須給出。
“name=string”說明，請求該服務時，需要提供參數。
調用該服務的完整路徑為：http://192.168.0.194:85/MyWebService.asmx/HelloSomeBody 。(具體情況，具體分析)
3.SetStudentInfo
說明：請求的頁面的地址: /MyWebService.asmx/SetStudentInfo;主機地址為:192.168.0.194;端口號：如果不是80端口，必須給出。
注意參數說明。
調用該服務的完整路徑為：http://192.168.0.194:85/MyWebService.asmx/SetStudentInfo 。(具體情況，具體分析)
4.GetMulStudentInfos
說明：請求的頁面的地址: /MyWebService.asmx/HelloSomeBody;主機地址為:192.168.0.194;端口號：如果不是80端口，必須給出。
調用該服務的完整路徑為：http://192.168.0.194:85/MyWebService.asmx/GetMulStudentInfos。(具體情況，具體分析)
3.下面是核心部分，也就是調用服務的Ajax腳本代碼。CallWebService.js
$(document).ready(pageLoad);
// 載入時進行執行的方法
function pageLoad() {
BindCallHello();
BindCallBody();
BindGetSingleStudent();
BindGetMulStudents();
}
// 調用HelloWebService
function BindCallHello(){
$("#btnCallHello").click(function() {
$.ajax({
type: "post", //訪問WebService使用Post方式請求
url: "http://192.168.0.194:85/MyWebService.asmx/HelloWebService", //調用Url(WebService的地址和方法名稱組合---WsURL/方法名)
data: {}, //這里是要傳遞的參數，為Json格式{paraName:paraValue}
contentType: "Application/Json", // 發送信息至服務器時內容編碼類型
beforeSend: function(XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "Application/Json"); // 接受的數據類型。(貌似不起作用，因為WebService的請求/返回 類型是相同的，由于請求的是Json，所以，返回的默認是Json)
},
success: function(data) {
var jsonValue = data;
alert(jsonValue.d);// 輸出Json
},
complete: function(XMLHttpRequest, textStatus) {
var returnText = XMLHttpRequest.responseText;
$("#backData").html(returnText);// 輸出服務器端返回數據
}
});
});
}
// 調用調用HelloSomeBody
function BindCallBody() {
$("#btnCallBody").click(function() {
var name = $("#txtName").val();
$.ajax({
type: "post", //訪問WebService使用Post方式請求
url: "http://192.168.0.194:85/MyWebService.asmx/HelloSomeBody", //調用Url(WebService的地址和方法名稱組合---WsURL/方法名)
data: "{name:'" + name + "'}", //這里是要傳遞的參數，為Json格式{paraName:paraValue}
contentType: "Application/Json", // 發送信息至服務器時內容編碼類型
beforeSend: function(XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "Application/Json"); // 接受的數據類型。(貌似不起作用，因為WebService的請求/返回 類型是相同的，由于請求的是Json，所以，返回的默認是Json)
},
success: function(data) {
var jsonValue = data;
alert(jsonValue.d); // 輸出Json
},
complete: function(XMLHttpRequest, textStatus) {
var returnText = XMLHttpRequest.responseText;
$("#backData").html(returnText); // 輸出服務器端返回數據
}
});
});
}
function BindGetSingleStudent() {
$("#btnSinStuInfo").click(function() {
var stuSid = $("#txtStuSid").val();
var stuName = $("#txtStuName").val();
var stuSex = $("#txtStuSex").val();
var stuAge = $("#txtStuAge").val();
$.ajax({
type: "post", //訪問WebService使用Post方式請求
url: "http://192.168.0.194:85/MyWebService.asmx/SetStudentInfo", //調用Url(WebService的地址和方法名稱組合---WsURL/方法名)
data: "{name:'" + stuName +"',sex:'"+stuSex+"',age:'"+stuAge+"',sid:'"+stuSid+ "'}", //這里是要傳遞的參數，為Json格式{paraName:paraValue}
contentType: "Application/Json", // 發送信息至服務器時內容編碼類型
beforeSend: function(XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "Application/Json"); // 接受的數據類型。(貌似不起作用，因為WebService的請求/返回 類型是相同的，由于請求的是Json，所以，返回的默認是Json)
},
success: function(data) {
var jsonValue = data;
alert(jsonValue.d.Sid); // 輸出Json
},
complete: function(XMLHttpRequest, textStatus) {
var returnText = XMLHttpRequest.responseText;
$("#backData").html(returnText); // 輸出服務器端返回數據
}
});
});
}
function BindGetMulStudents() {
$("#btnMulStuInfos").click(function() {
$.ajax({
type: "post", //訪問WebService使用Post方式請求
url: "http://192.168.0.194:85/MyWebService.asmx/GetMulStudentInfos", //調用Url(WebService的地址和方法名稱組合---WsURL/方法名)
data: {}, //這里是要傳遞的參數，為Json格式{paraName:paraValue}
contentType: "Application/Json", // 發送信息至服務器時內容編碼類型
beforeSend: function(XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("Accept", "Application/Json"); // 接受的數據類型。(貌似不起作用，因為WebService的請求/返回 類型是相同的，由于請求的是Json，所以，返回的默認是Json)
},
success: function(data) {
var jsonValue = data;
alert(jsonValue.d[0].Sid); // 輸出Json
},
complete: function(XMLHttpRequest, textStatus) {
var returnText = XMLHttpRequest.responseText;
$("#backData").html(returnText); // 輸出服務器端返回數據
}
});
});
}
說明：相關注釋寫的很詳細，應該地球人都知道。應該是玩程序的地球人都知道。
總結：
至此，所有代碼知識點，都已經貼出來了。
細心的讀者應該能發現，我之所以很贅述的把4個服務方法都列了出來，其實是想讓大家看清楚，每個方法的側重點不同。調用方法上包括：無參數的調用，參數調用。
返回值類型上包括：返回字符串，返回自定義實體數據。
所有返回值都為Json數據。Json數據作為返回值，近來大受親睞。
總結
以上是生活随笔為你收集整理的java js webservice_java Web技术探路：js Ajax调用WebService的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oracle asm 分布式存储,分布式
- 下一篇： python中网页关闭再打开_Pytho