jQuery dialog 異步調(diào)用ashx,webservice數(shù)據(jù)的代碼
更新時間:2010年08月03日 00:42:59 作者:
點擊按鈕,在彈出的jQuery.dialog中,顯示異步返回的數(shù)據(jù)。WebService可以寫復雜的函數(shù),ashx可以根據(jù)傳過來的參數(shù)調(diào)用不同的方法,達到同樣的效果。
本文用到了博客園TerryFeng的例子。
Html,JS代碼:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="test_jQuery_dialog_Default" %>
<!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 runat="server">
<title>無標題頁</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function (){
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
alert("OK");
$(this).dialog("close");
},
"Cancel": function() {
alert("Cancel");
$(this).dialog("close");
}
}
});
}
)
function show()
{
$('#dialog').dialog('open');
}
function ajax1()
{
$.ajax({
type:"get",
url:"action/test.ashx",
data:{"time":Math.random()},
beforeSend:function(XMLHttpRequest)
{
},
success:function(msg)
{
alert(msg);
}
});
}
function ajax2()
{
$.ajax({
type:"post",
contentType: "application/json",
url:"action/WebService.asmx/HelloWorld",
data:{},
dataType: 'json',
success:function(msg)
{
alert(msg);
}
});
}
function ajax3(setvalue1,setvalue2)
{
if(setvalue1.length==0||setvalue2.length==0)
{
alert('請將兩個文本框輸入完整!');
return false;
}
$.ajax({
type:"post",
contentType: "application/json",
url:"action/WebService.asmx/HelloA",
data:"{a:'"+setvalue1+"',b:'"+setvalue2+"'}",
dataType: 'json',
success:function(msg)
{
alert(msg);
}
});
}
//返回集合
function ajax4()
{
$.ajax({
type: "post",
contentType: "application/json",
url: "action/WebService.asmx/GetArray",
data: "{'i':'10'}",
success: function(msg) {
alert(msg);
}
});
}
//返回復合類型
function ajax5()
{
$.ajax({
type: "post",
contentType: "application/json",
url: "action/WebService.asmx/GetClass",
data: "{}",
success: function(msg) {
$(msg).each(function() {
alert(msg["ID"]+'___'+msg["Value"]);
});
}
});
}
//返回dataset
function ajax6()
{
$.ajax({
type: "post",
url: "action/WebService.asmx/GetDataSet",
data: "{}",
datatype:"xml",
success: function(msg) {
$(msg).find('Table1').each(function() {
alert($(this).find("ID").text()+'___'+$(this).find("Value").text());
});
}
});
}
</script>
<form id="form1" runat="server">
<input id="dialog_link" type="button" value="Show" onclick="show()" />
<div id="dialog" style="display: none; background-color: Aqua; width: 200px; height: 150px;">
WebService參數(shù)1<input type="text" id="txtMsg1" /><br/>
WebService參數(shù)2<input type="text" id="txtMsg2" /><br/>
<input type="button" value="調(diào)用Ashx一般處理程序" onclick="ajax1()" id="btn1" />
<input type="button" value="調(diào)用無參數(shù)WebService" onclick="ajax2()" id="btn2" />
<input type="button" value="調(diào)用有參數(shù)WebService" onclick="ajax3(txtMsg1.value,txtMsg2.value)" id="btn3" />
<input type="button" value="調(diào)用返回集合的WebService" onclick="ajax4()" id="btn4" />
<input type="button" value="調(diào)用返回復合類型的WebService" onclick="ajax5()" id="btn5" />
<input type="button" value="調(diào)用返回DataSet的WebService" onclick="ajax6()" id="btn6" />
<div id="dictionary"></div>
In Dialog!
</div>
</form>
</body>
</html>
作者博客:http://www.cnblogs.com/qixuejia/
Html,JS代碼:
復制代碼 代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="test_jQuery_dialog_Default" %>
<!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 runat="server">
<title>無標題頁</title>
</head>
<body>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script src="js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function (){
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
alert("OK");
$(this).dialog("close");
},
"Cancel": function() {
alert("Cancel");
$(this).dialog("close");
}
}
});
}
)
function show()
{
$('#dialog').dialog('open');
}
function ajax1()
{
$.ajax({
type:"get",
url:"action/test.ashx",
data:{"time":Math.random()},
beforeSend:function(XMLHttpRequest)
{
},
success:function(msg)
{
alert(msg);
}
});
}
function ajax2()
{
$.ajax({
type:"post",
contentType: "application/json",
url:"action/WebService.asmx/HelloWorld",
data:{},
dataType: 'json',
success:function(msg)
{
alert(msg);
}
});
}
function ajax3(setvalue1,setvalue2)
{
if(setvalue1.length==0||setvalue2.length==0)
{
alert('請將兩個文本框輸入完整!');
return false;
}
$.ajax({
type:"post",
contentType: "application/json",
url:"action/WebService.asmx/HelloA",
data:"{a:'"+setvalue1+"',b:'"+setvalue2+"'}",
dataType: 'json',
success:function(msg)
{
alert(msg);
}
});
}
//返回集合
function ajax4()
{
$.ajax({
type: "post",
contentType: "application/json",
url: "action/WebService.asmx/GetArray",
data: "{'i':'10'}",
success: function(msg) {
alert(msg);
}
});
}
//返回復合類型
function ajax5()
{
$.ajax({
type: "post",
contentType: "application/json",
url: "action/WebService.asmx/GetClass",
data: "{}",
success: function(msg) {
$(msg).each(function() {
alert(msg["ID"]+'___'+msg["Value"]);
});
}
});
}
//返回dataset
function ajax6()
{
$.ajax({
type: "post",
url: "action/WebService.asmx/GetDataSet",
data: "{}",
datatype:"xml",
success: function(msg) {
$(msg).find('Table1').each(function() {
alert($(this).find("ID").text()+'___'+$(this).find("Value").text());
});
}
});
}
</script>
<form id="form1" runat="server">
<input id="dialog_link" type="button" value="Show" onclick="show()" />
<div id="dialog" style="display: none; background-color: Aqua; width: 200px; height: 150px;">
WebService參數(shù)1<input type="text" id="txtMsg1" /><br/>
WebService參數(shù)2<input type="text" id="txtMsg2" /><br/>
<input type="button" value="調(diào)用Ashx一般處理程序" onclick="ajax1()" id="btn1" />
<input type="button" value="調(diào)用無參數(shù)WebService" onclick="ajax2()" id="btn2" />
<input type="button" value="調(diào)用有參數(shù)WebService" onclick="ajax3(txtMsg1.value,txtMsg2.value)" id="btn3" />
<input type="button" value="調(diào)用返回集合的WebService" onclick="ajax4()" id="btn4" />
<input type="button" value="調(diào)用返回復合類型的WebService" onclick="ajax5()" id="btn5" />
<input type="button" value="調(diào)用返回DataSet的WebService" onclick="ajax6()" id="btn6" />
<div id="dictionary"></div>
In Dialog!
</div>
</form>
</body>
</html>
作者博客:http://www.cnblogs.com/qixuejia/
您可能感興趣的文章:
- Jquery Ajax學習實例4 向WebService發(fā)出請求,返回實體對象的異步調(diào)用
- Jquery Ajax學習實例5 向WebService發(fā)出請求,返回泛型集合數(shù)據(jù)的異步調(diào)用
- Jquery Ajax學習實例6 向WebService發(fā)出請求,返回DataSet(XML) 異步調(diào)用
- 異步調(diào)用webservice返回responseXML為空的問題解決方法
- android中soap協(xié)議使用(ksoap調(diào)用webservice)
- python調(diào)用java的Webservice示例
- PHP調(diào)用JAVA的WebService簡單實例
- http調(diào)用webservice操作httprequest、httpresponse示例
- php中創(chuàng)建和調(diào)用webservice接口示例
- 同步調(diào)用和異步調(diào)用WebService
相關(guān)文章
Jquery中ajax方法data參數(shù)的用法小結(jié)
本篇文章主要是對Jquery中ajax方法data參數(shù)的用法進行了總結(jié)介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02JQuery.dataTables表格插件添加跳轉(zhuǎn)到指定頁
這篇文章主要介紹了JQuery.dataTables表格插件添加跳轉(zhuǎn)到指定頁的解決方案,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2017-06-06關(guān)于jquery中全局函數(shù)each使用介紹
jquery 包含了兩個 each 一個是 $().each 另一個是 $.each 區(qū)別就在于前一個是 jquery對象的內(nèi)置函數(shù) 而后一個 這是對象的遍歷函數(shù)2013-12-12jQuery.extend()、jQuery.fn.extend()擴展方法示例詳解
這篇文章主要介紹了jQuery.extend()、jQuery.fn.extend()擴展方法的應用,需要的朋友可以參考下2014-05-0530個讓人興奮的視差滾動(Parallax Scrolling)效果網(wǎng)站
視差滾動(Parallax Scrolling)是指讓多層背景以不同的速度移動,形成立體的運動效果,帶來非常出色的視覺體驗。作為今年網(wǎng)頁設(shè)計的熱點趨勢,越來越多的網(wǎng)站應用了這項技術(shù)。今天這篇文章就與大家分享30個視差滾動效果的網(wǎng)頁設(shè)計作品,一起欣賞(以拖動滾動條方式瀏覽效果更佳)2012-03-03jQuery實現(xiàn)類似淘寶網(wǎng)圖片放大效果的方法
這篇文章主要介紹了jQuery實現(xiàn)類似淘寶網(wǎng)圖片放大效果的方法,實例分析了jquery實現(xiàn)圖片放大效果的方法,涉及jquery操作鼠標事件及頁面元素屬性修改的相關(guān)技巧,需要的朋友可以參考下2015-07-07