無刷新綁定select數據源

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> 無刷新綁定select數據源

無刷新綁定select數據源

編輯：AJAX詳解

這是利用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事件……

資料引用:http://www.knowsky.com/552239.Html

AJAX詳解

jquery團隊發布jquery 1.4: jquery 1.4其實已經發布了兩個alpha版本和一個RC版本，相信關注jquery的同學已經
AJAX實例：根據郵編自動完成地址信息: 描述：　　在注冊或購物車結帳的時候，需要用戶填入個人資料，這個環節可以簡練一下，我們只需客人填入
一頁面多XMLHTTPRequest對象: 剛在ajacn發了個貼，關於為XMLHttpRequest提供一個對象池。或許能幫到你，轉貼如下：

AJAX基礎知識 AJAX詳解

小編推薦

AJAX實現基於WEB的文件上傳的進度控制 NickLee.Framework.2.XFor.net1.1,2.0 構造函數（新手寫給新手） readyState的五種狀態詳解一個Ajax類如何使用Javascript操作XMLDOM才能兼容IE、FireFox浏覽器呢？讓UpdatePanel支持文件上傳（5）：支持頁面重定向的HttpModule Ajax技術初探喜歡Ajax的十大理由征戰AjaxPro-AjaxPro實例

DIV CSS 佈局教程網

相關文章