续前一篇 ，本篇讲解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 >
后台代码
后台代码（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{ public partial class UseJason : System.Web.UI.Page{ private static List < Car > listCars; protected void Page_Load( object sender, EventArgs e){ }[WebMethod] public static 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] public static string GetCarPrice( string carName){ if ( null != listCars){ foreach (Car car in listCars){ if (car.carName == carName){ return car.carPrice.ToString();}}} return string .Empty;}}}
一个类文件
class（Car.cs） using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace AjaxTest{ public class Car{ public string carName { get ; set ; } public string carDescription { get ; set ; } public double carPrice { get ; set ; } public Car( string name, string description, double price){ this .carName = name; this .carDescription = description; this .carPrice = price;}}}
如有问题，请留言……