Django+Ajax實戰(zhàn)

hkebao

1.看到網(wǎng)上這方面的資料比較少的。自己寫點東西出來看看對將來有所整理幫助！
示例一：
前端
服務(wù)端：返回的是文本或是一段HTML代碼
JS代碼還是原來的一樣：
var xmlHttp;
function createXMLHttpRequest() {
    if (window.ActiveXObject) {
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    } else if (window.XMLHttpRequest) {
          xmlHttp = new XMLHttpRequest();
    }
}
function startRequest(i_option) {
    createXMLHttpRequest();
    xmlHttp.onreadystatechange = handleStateChange;   
    var qurl = "/networkport/ajax/?i_option='"+i_option+"'";//發(fā)送請求到的URL地址
    xmlHttp.open("GET", qurl, true);
    xmlHttp.send(null);
}
function handleStateChange() {        
    if(xmlHttp.readyState == 4) {               
        if(xmlHttp.status == 200) {
            document.getElementById('np_server_serial').innerHTML = xmlHttp.responseText;         
         }
    }
}
服務(wù)器端代碼：
def ajax(request):   
    return HttpResponse("hello")
返回的是一段文本。
也可以是返回一段HTML代碼請看：
def ajax(request):   
    return HttpResponse("123456")
直接生成一段HTML片段出來。則客戶端一樣是可以解析出來使用的！
還可以是從模型層中讀取出來的數(shù)據(jù)拼結(jié)出來的數(shù)據(jù)返回到客戶端如下：
def ajax(request):
    i_option = request.GET.get('i_option','')
    result = ""
    serverinfolist = ServerInfo.getAllServerInfo(i_option)
    for record in serverinfolist:
        i_serverserial = record[1]
        result = result + "%s"%(i_serverserial)        
    result = result + ""
    return HttpResponse(result)
直接是一段的HTML代碼。
現(xiàn)在我將 部分放到客戶端去。服務(wù)端只返回的是里面的內(nèi)容
option 集合可返回包含  元素中所有  的一個數(shù)組。即返回的是一個數(shù)組。
obj.options[obj.options.length] = new Option('0123','0');\n
obj.options[obj.options.length] = new Option('123','456');\n
function handleStateChange() {        
    if(xmlHttp.readyState == 4) {               
        if(xmlHttp.status == 200) {
            var obj = document.getElementById('np_server_serial');
            eval(xmlHttp.responseText);         
         }
    }
}
客戶端的解析函數(shù)直接使用了eval方法處理的！
服務(wù)端的代碼：
def locaajax(request):
    i_option = request.GET.get('i_option','')
    result = "obj.options[obj.options.length] = new Option('位置','0');\n"
    serverinfolist = ServerInfo.getAllServerInfo(i_option)  
    for record in serverinfolist:
        i_location = record[3]
        result = result + "obj.options[obj.options.length] = new Option('456','123');\n"   
  
    logging.debug(result)  
    return HttpResponse(result)
可以直接返回一段HTML代碼片段回來的。然后重新解析生成SELECT數(shù)據(jù)的！
解決上面的BUG。不能正常讀取來自數(shù)據(jù)庫的記錄值 即：
result = result + "obj.options[obj.options.length] = new Option('456','123');\n"   
這一句有問題。
result = result + "obj.options[obj.options.length] = new Option('" + i_serverserial + "','" + i_serverserial +"');\n"
這樣的解決不行！
（報的異常是：'ascii' codec can't decode byte 0xe8）
表示的是：有編碼問題。我查了一個DB發(fā)現(xiàn)是gbk編碼而我頁面是UTF-8
解決方法整理：
第一步：原來我建表的時候是直接使用ORM創(chuàng)建的。而ORM創(chuàng)建的時候原來將表都設(shè)置成了GB2312
估計是數(shù)據(jù)庫是GB2312的編碼 而我的頁面是UTF-8的編碼所以不能正常轉(zhuǎn)換過來的！
整理一下Python里面的編碼函數(shù)：
result=result.decode("gbk").encode("utf-8")
上面的語句即是將結(jié)果按gbk解碼，然后按utf-8編碼。
decode表示這個字符串是按照什么進行解碼。encode表示按照什么進行編碼
（報的異常是：'ascii' codec can't decode byte 0xe8） 我的解決之道：
因為我的數(shù)據(jù)庫是GB2312的編碼。所以取出來是GB2312了。
而我的頁面代碼是UTF-8的編碼所以。需要進行一次轉(zhuǎn)碼
result=result.decode("gbk").encode("utf-8")
前面因為是DB為GBK的編碼所以先進行解碼出來。然后再重新編碼一下。
我的最終解決方案：
def ajax(request):
    i_option = request.GET.get('i_option','')
    result = "obj.options[obj.options.length] = new Option('請選擇','0');\n"
    serverinfolist = ServerInfo.getAllServerInfo(i_option)  
    for record in serverinfolist:
        i_serverserial = record[1]
        i_serverserial = i_serverserial.decode("gbk").encode("utf-8")
        result = result + "obj.options[obj.options.length] = new Option('%s','%s');\n"%(i_serverserial,i_serverserial)   
    return HttpResponse(result)
返回的是select中的中間部分?jǐn)?shù)據(jù)出來。
返回到了客戶端再進行一次新的拼結(jié)出來！
完成select的聯(lián)動AJAX！沒用JQuery框架
               
               
               

本文來自ChinaUnix博客，如果查看原文請點：http://blog.chinaunix.net/u2/84280/showart_2068614.html