jquery-ajax之3：无刷新select数据源及事件绑定(1)

这是利用Ajax、json给前台页面中的select绑定数据源，原理简单，诸君一看便知： 前台页面（ASP.NET）：

前台页面 ASP.net

<% @ 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);
}
});
});

$( " #SelectCars " ).change( function () {
CarSelectChange();
});
});

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);
});
}

function CarSelectChange() {
var o = $( " #SelectCars " )[ 0 ].options;
}
</ 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）

后台（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
{
protected void Page_Load( object sender, EventArgs e)
{

}

[WebMethod]
public static List < Car > GetCars()
{
List < Car > 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;
}
}
}

 

 

最后有一个类文件（Car.cs）

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;
}
}
}

 

 

好了，本篇内容较简单，下一篇我们将讨论这个页面中的select的onchange事件……