ajax串連資料庫載入+三級聯動

標籤：parent   click   對象   eric   子集   sys   lin   nic   應用   

ajax串連資料庫載入

ajax是指一種建立互動式網頁應用的網頁開發技術。

AJAX = 非同步JS和XML（標準通用標記語言 (SGML)的子集）。

AJAX 是一種用於建立快速動態網頁的技術。 通過在後台與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。 傳統的網頁（不使用 AJAX）如果需要更新內容，必須重載整個網頁頁面。 優點：是在不重新載入整個頁面的情況下，可以與伺服器交換資料並更新部分網頁內容。　　不需要任何瀏覽器外掛程式，但需要使用者允許JavaScript在瀏覽器上執行。 1.建立AJAX 點擊按鈕載入資料。.建立一個LINQ to SQL 類，將User表和Nation表拉到類中建立一個 web表單 或者純html介面 +一個一般處理常式LoadUserajax.ashx

(1)body內代碼

 1  <table id="tb1" style=" text-align: center; width: 100%;"> 2     <thead> 3         <tr style="color: #ff6a00;"> 4             <td>使用者名稱</td> 5             <td>密碼</td> 6             <td>暱稱</td> 7             <td>性別</td> 8             <td>生日</td> 9             <td>年齡</td>10             <td>民族</td>11         </tr>12     </thead>13     <tbody>14     </tbody>15     </table>16     <input type="button" value="載入" id="btn1" />

（2）js代碼部分

 1 <script> 2     //點擊載入按鈕 3     $("#btn1").click(function () { 4         //編寫ajax語句,將資料提交到某個服務端去 5         $.ajax({ 6             url: "ajax/LoadUserajax.ashx",//將資料要提交到哪個服務端 7             data: {},//將什麼資料提交到服務端去,{}內基本格式為"key":"要傳的資料" 8             type: "post",//用什麼樣的方式將資料提交過去 9             dataType: "json",//返回一個什麼樣的資料類型10             //請求完成11             success: function (data) {12                 $("#tb1 tbody").empty();//清空tbody13                 for (i in data) {14                     var str = "<tr style=\"\">";15                     str += "<td>" + data[i].username + "</td>";16                     str += "<td>" + data[i].password + "</td>";17                     str += "<td>" + data[i].nickname + "</td>";18                     str += "<td>" + data[i].sex + "</td>";19                     str += "<td>" + data[i].birthday + "</td>";20                     str += "<td>" + data[i].age + "</td>";21                     str += "<td>" + data[i].nation + "</td>";22                     str += "</tr>";23                     $("#tb1 tbody").append(str);24                 }25             },//success26             //請求失敗27             error: function () {28                 alert(‘伺服器串連失敗！！！‘);29             }30         });//ajax31     });//btn1.click32 </script>

（3）userajax.ashx內代碼

 1 <%@ WebHandler Language="C#" Class="userajax" %> 2  3 using System; 4 using System.Web; 5 using System.Collections; 6 using System.Collections.Generic; 7 using System.Linq; 8 using System.Text; 9 10 public class userajax : IHttpHandler11 {12 13     public void ProcessRequest(HttpContext context)14     {15         //有資料接收時，用context.Request["key"];將ajax傳過來的資料取出來16         int count = 0;//前面是否有資料17         string end = "[";//建立json對象，設定預設值,基本格式為{"key":"value","":"","":""}，有多條時用[]括住，每條之間用,隔開18         using (WebDataContext con = new WebDataContext())19         {20             List<User> ulist = con.User.ToList();21             foreach (User u in ulist) {22                 //前面有資料23                 if (count>0) {24                     end += ",";25                 }26                 end += "{\"username\":\""+u.UserName+"\",\"password\": \""+u.PassWord+"\",\"nicknane\":\""+u.NickName+"\",\"sex\": \""+u.SexStr+"\",\"birthday\": \""+u.BirStr+"\",\"age\":\""+u.Age+"\",\"nation\":\""+u.NationName+"\" }";27                 count++;28             }29         }30         end += "]";31             context.Response.Write(end);32             context.Response.End();33      34     }35 36     public bool IsReusable37     {38         get39         {40             return false;41         }42     }43 44 }

 2. json與xml 

xml和json的作用：在不同語言之間進行資料傳遞

最早使用的資料類型是 xml
劣勢：
1、代碼量較大
2、結構不清晰
3、解析起來麻煩

現在使用的資料類型是 json
優勢：
1、結構清晰
2、類似於物件導向的解析方式

json基本格式：
{"key":"value","":"","":""}

{"username":"","password":"","nickname":"","sex":"","birthday":"","nation":""}

 -------------------------------------------------------三級聯動 不重新整理介面1.建立三個 DropDownList

2.js

bind1($("#DropDownList1"), ‘0001‘, ‘1‘);    function bind1(drop, pc, key) {        $.ajax({            url: "ajax/china.ashx",            data: { "pcode": pc },            type: "post",            dataType: "json",            success: function (data) {                drop.empty();                for (i in data) {                    var str = "<option value=\"" + data[i].code + "\">" + data[i].name + "</option>";                    drop.append(str);                }                if (key == "1")                    {                    bind1($("#DropDownList2"), $("#DropDownList1").val(), ‘2‘);                }                if (key == "2") {                    bind1($("#DropDownList3"), $("#DropDownList2").val(), ‘3‘);                }            },            error: function () {                alert(‘伺服器串連失敗！‘);            }        });    }    $("#DropDownList1").change(function () {        bind1($("#DropDownList2"), $(this).val(), ‘2‘);    });    $("#DropDownList2").change(function () {        bind1($("#DropDownList3"), $(this).val(), ‘3‘);    });

3.一般處理常式

using System;using System.Web;using System.Collections;using System.Collections.Generic;using System.Linq;using System.Text;public class china : IHttpHandler {        public void ProcessRequest (HttpContext context) {        string pcode = context.Request["pcode"];        StringBuilder end = new StringBuilder();        int count = 0;        end.Append("[");        using (mydbDataContext con = new mydbDataContext())        {            List<ChinaStates> clist = con.ChinaStates.Where(r => r.ParentAreaCode == pcode).ToList();            foreach (ChinaStates c in clist)            {                if (count > 0)                    end.Append(",");                                end.Append("{\"code\":\""+c.AreaCode+"\",\"name\":\""+c.AreaName+"\"}");                count++;            }        }        end.Append("]");        context.Response.Write(end);        context.Response.End();    }     public bool IsReusable {        get {            return false;        }    }}

 

                 

ajax串連資料庫載入+三級聯動