jquery-ajax之4：无刷新 select 数据源及事件绑定(2)
续前一篇无刷新 select 数据源及事件绑定 (1)，本篇讲解select的onchange事件和利用ajax静态调用后台方法
页面（asp.net）
页面（UseJason.aspx）
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UseJason.aspx.cs" Inherits="AjaxTest.UseJason"%>
<!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>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnGetCars").click(function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "UseJason.aspx/GetCars",
data: "{}",
dataType: "json",
success: GetCars,
error: function errorCallback(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown +":"+ textStatus);
}
});
});
// 响应select的change事件
$("#SelectCars").change(function () {
CarSelectChange();
});
});
// 绑定selece的数据源
function GetCars(result) {
$(result.d).each(function () {
var o = document.createElement("option");
o.value =this['carName'];
o.text =this['carDescription'];
$("#SelectCars")[0].options.add(o);
});
}
// 通过select的change事件，调用后台方法：GetCarPrice
function CarSelectChange() {
var carName = $("#SelectCars")[0].value;
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "UseJason.aspx/GetCarPrice",
data: "{'carName':'"+ carName +"'}",
dataType: "json",
success: ShowCarPrice,
error: function errorCallback(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown +":"+ textStatus);
}
});
}
// 把从后台反馈的结果给text赋值
function ShowCarPrice(result) {
$("#txtPrice").val(result.d);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<input type="button" id="btnGetCars" value="GetCars"/>
<div style="margin-top: 20px">
<p>
Cars list :
</p>
<select id="SelectCars" style="width: 185px;">
</select>
<p>
Price :
</p>
<input type="text" id="txtPrice"/>
</div>
</div>
</div>
</form>
</body>
</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 runat="server">
<title></title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnGetCars").click(function () {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "UseJason.aspx/GetCars",
data: "{}",
dataType: "json",
success: GetCars,
error: function errorCallback(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown +":"+ textStatus);
}
});
});
// 响应select的change事件
$("#SelectCars").change(function () {
CarSelectChange();
});
});
// 绑定selece的数据源
function GetCars(result) {
$(result.d).each(function () {
var o = document.createElement("option");
o.value =this['carName'];
o.text =this['carDescription'];
$("#SelectCars")[0].options.add(o);
});
}
// 通过select的change事件，调用后台方法：GetCarPrice
function CarSelectChange() {
var carName = $("#SelectCars")[0].value;
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "UseJason.aspx/GetCarPrice",
data: "{'carName':'"+ carName +"'}",
dataType: "json",
success: ShowCarPrice,
error: function errorCallback(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown +":"+ textStatus);
}
});
}
// 把从后台反馈的结果给text赋值
function ShowCarPrice(result) {
$("#txtPrice").val(result.d);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<input type="button" id="btnGetCars" value="GetCars"/>
<div style="margin-top: 20px">
<p>
Cars list :
</p>
<select id="SelectCars" style="width: 185px;">
</select>
<p>
Price :
</p>
<input type="text" id="txtPrice"/>
</div>
</div>
</div>
</form>
</body>
</html>
后台代码
后台代码（UseJason.aspx.cs）
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
namespace AjaxTest
{
publicpartialclass UseJason : System.Web.UI.Page
{
privatestatic List<Car> listCars;
protectedvoid Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
publicstatic List<Car> GetCars()
{
listCars =new List<Car>() {
new Car("A1","A1 Description",205000),
new Car("B12","B12 Description",105300),
new Car("Dfe","Dfe Description",658982),
new Car("Yfee","Yfee Description",8458700),
new Car("UUdde","UUdde Description",6548225)};
return listCars;
}
[WebMethod]
publicstaticstring GetCarPrice(string carName)
{
if (null!= listCars)
{
foreach (Car car in listCars)
{
if (car.carName == carName)
{
return car.carPrice.ToString();
}
}
}
returnstring.Empty;
}
}
}
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
namespace AjaxTest
{
publicpartialclass UseJason : System.Web.UI.Page
{
privatestatic List<Car> listCars;
protectedvoid Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
publicstatic List<Car> GetCars()
{
listCars =new List<Car>() {
new Car("A1","A1 Description",205000),
new Car("B12","B12 Description",105300),
new Car("Dfe","Dfe Description",658982),
new Car("Yfee","Yfee Description",8458700),
new Car("UUdde","UUdde Description",6548225)};
return listCars;
}
[WebMethod]
publicstaticstring GetCarPrice(string carName)
{
if (null!= listCars)
{
foreach (Car car in listCars)
{
if (car.carName == carName)
{
return car.carPrice.ToString();
}
}
}
returnstring.Empty;
}
}
}
一个类文件
class（Car.cs）
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace AjaxTest
{
publicclass Car
{
publicstring carName { get; set; }
publicstring carDescription { get; set; }
publicdouble carPrice { get; set; }
public Car(string name, string description, double price)
{
this.carName = name;
this.carDescription = description;
this.carPrice = price;
}
}
}
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace AjaxTest
{
publicclass Car
{
publicstring carName { get; set; }
publicstring carDescription { get; set; }
publicdouble carPrice { get; set; }
public Car(string name, string description, double price)
{
this.carName = name;
this.carDescription = description;
this.carPrice = price;
}
}
}
如有问题，请留言……
