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>
<!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
{
publicpartialclass UseJason : System.Web.UI.Page
{
protectedvoid Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
publicstatic 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;
}
}
}
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
{
protectedvoid Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
publicstatic 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
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;
}
}
}
好了，本篇内容较简单，下一篇我们将讨论这个页面中的select的onchange事件……
