AjaxJQueryPage.aspx
----------------------------------------------------------------------------------------------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxJQueryPage.aspx.cs" Inherits="AjaxJQueryPage" %>
<!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></title>
<script src="../js/jquery-1.4.1.js" type ="text/javascript"></script>
<script src="../js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( //页面加载执行
function() {
//alert("this is ready!");
//$("a").click(function(){ alert("Hello world!");}
//alert($('#Button1').value);
//$('#Button1').value = 'Save';
//$('#stats').load('index_baidu.html');
/**/
$("#btnClick1").bind("click", function(event) {
$.ajax({
//要用post方式
type: "POST",
url: "AjaxJQueryPage.aspx/SayHello",
dataType: "json", //dataType: "json",
data: "{}" , //把要调用的函数名作为参数传递到服务器就好了 //参数（如果没有参数：null）
//方法所在页面和方法名Data.aspx
contentType: "application/json; charset=utf-8",
success: function(data) {
//返回的数据用data.d获取内容 json
alert("data:" + data.d);
},
error: function(err) {
alert("err:" + err);
}
});
//禁用按钮的提交
return false;
});
$("#btnClick2").bind("click", function(event) {
var shengVal = $("#Select1").val();
$.ajax({
//要用post方式
type: "POST",
url: "AjaxJQueryPage.aspx/GetCity",
data: "{ 'ShengName':'" + shengVal + "'}", //把要调用的函数名作为参数传递到服务器就好了 //参数（如果没有参数：null）
//方法所在页面和方法名Data.aspx
contentType: "application/json; charset=utf-8",
dataType: "json", //dataType: "json",
success: function(data) {
//返回的数据用data.d获取内容 json
alert("data:" + data.d);
},
error: function(err) {
alert("err:" + err);
}
});
//禁用按钮的提交
return false;
});
$("#btnClick3").bind("click", function(event) {
$.ajax({
//要用post方式
type: "POST",
url: "Data.aspx/SayHello",
dataType: "json", //dataType: "json",
data: "{}", //把要调用的函数名作为参数传递到服务器就好了 //参数（如果没有参数：null）
//方法所在页面和方法名Data.aspx
contentType: "application/json; charset=utf-8",
success: function(data) {
//返回的数据用data.d获取内容 json
alert("data:" + data.d);
},
error: function(err) {
alert("err:" + err);
}
});
//禁用按钮的提交
return false;
});
$("#btnClick4").bind("click", function(event) {
var shengVal = $("#Select1").val();
$.ajax({
//要用post方式
type: "POST",
url: "Data.aspx/GetCity",
data: "{ 'ShengName':'" + shengVal + "'}", //把要调用的函数名作为参数传递到服务器就好了 //参数（如果没有参数：null）
//方法所在页面和方法名Data.aspx
contentType: "application/json; charset=utf-8",
dataType: "json", //dataType: "json",
success: function(data) {
//返回的数据用data.d获取内容 json
alert("data:" + data.d);
},
error: function(err) {
alert("err:" + err);
}
});
//禁用按钮的提交
return false;
});
});
window.onload = function() {
//alert("how old are you !");
};
</script>
<style type="text/css">
.style1
{
width: 101px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<input id="Button1" type="button" value="button" />
<div id="stats"></div>
<a href='#'>Some link</a><br />
<script type ="text/javascript">
var butval = $("#Button1").val();
$("#Button1").val("保存");
</script>
<!--eg2 --->
<input id="txtcontent" type="text" /></br>
<input id="btShow" type="button" value="显示 " />
<input id="btHide" type="button" value="隐藏" />
<input id="btsave" type="button" value="保存" />
<input id="btchange" type="button" value="修改为hello" />
<div id="divMsg">Hello World!</div>
<script type="text/javascript">
$("#btShow").bind("click", function(event) { $("#txtcontent").show(); })
$("#btHide").bind("click", function(event) { $("#txtcontent").hide(); })
$("#btsave").bind("click", function(event) { $("#divMsg").html($("#txtcontent").val()); })
$("#btchange").bind("click", function(event) { $("#divMsg").html("Hello"); $("#txtcontent").val("Hello") })
</script>
<input id="btnClick1" type="button" value="AjaxJQueryPage.aspx后台方法回调SayHello " />
<input id="btnClick2" type="button" value="AjaxJQueryPage.aspx后台方法回调GetCity " />
<br />
<input id="btnClick3" type="button" value="data.aspx后台方法回调SayHello " />
<input id="btnClick4" type="button" value="data.aspx后台方法回调GetCity " />
<div id="selsheng">省份</div>
选择省：
<select id="Select1" class="style1" name="Select1">
<option>四川省</option>
<option>重庆市</option>
<option>云南省</option>
</select>
选择市：
<select id="Select2" class="style1" name="Select2">
<option></option>
</select>
<script type="text/javascript">
// $("#Select1").bind("change", function(event) {
// var shengVal = $("#Select1").val();
// alert(shengVal);
// $("#selsheng").html(shengVal);
// });
$('#Select1').change(function() {
var shengVal;
//shengVal = $(this).children('option:selected').val();
//shengVal = $("#Select1").val();
shengVal = this.value;
//alert($(this).children('option:selected').val()); //弹出select的值
//alert(shengVal);
$("#selsheng").html(shengVal);
//后台JQuery+Ajax+Ashx获取市的数据 OK
/*$.ajax({
type: "POST",
//dataType:"Text",
url: "AjaxHandlerGetCity.ashx",
data: { ShengName: shengVal },
beforeSend: function() { $("#selsheng").html("loading"); },
success: function(msg) {
$("#selsheng").html(shengVal);
$("#Select2").html(msg);
}
});*/
//JQuery+Ajax+WebService方法 net2.0
/* */
$.ajax({
type: "POST",
url: " WebServiceData.asmx/GetCity",
data: '{"ShengName":"' + shengVal + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function() { $("#selsheng").html("loading"); },
success: function(msg) {
var data = eval("(" + msg + ")");
var t = "";
jQuery.each(data, function(rec) {
t = t + this.CityName;
});
$("#Select2").html(t);
},
error: function(err) {
alert("err:" + err);
}
});
//后台JQuery+Ajax+Asp.net后台方法获取市的数据 OK net3.5
/*
$.ajax({
type: "Post",
url: "Data.aspx/GetCity",
//方法传参的写法一定要对，str为形参的名字,str2为第二个形参的名字
data: "{'ShengName':'" + shengVal + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data) {
//返回的数据用data.d获取内容
//alert(data.d);
$("#Select2").html(data.d)
},
error: function(err) {
alert(err);
}
});
}); */
//前端JQuery+Javascript写代码 OK
/*
if (shengVal == "四川省") {
$("#Select2").html("<option>成都市</option><option>达州市</option>");
$("#Select2").val("达州市");
}
else if (shengVal == "重庆市") {
$("#Select2").html("<option>大足县</option><option>渝中区</option>");
}
else if (shengVal == "云南省") {
$("#Select2").html("<option>丽江市</option><option>昆明市</option>");
}
else {
$("#Select2").html("");
}*/
});
</script>
<div>
<asp:Button ID="btnClick" runat="server" Text="click me" />
<br />
<span id="msg"></span>
</div>
</form>
</body>
</html>
AjaxJQueryPage.aspx.cs
----------------------------------------------------------------------------------------------------------