ajax連接數據庫加載+三級聯動


ajax連接數據庫加載

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

AJAX = 異步JS和XML(標准通用標記語言的子集)。

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();//清空tbody
13                 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             },//success
26             //請求失敗
27             error: function () {
28                 alert('服務器連接失敗!!!');
29             }
30         });//ajax
31     });//btn1.click
32 </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 : IHttpHandler
11 {
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 IsReusable
37     {
38         get
39         {
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;
        }
    }

}


 

 
        
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM