Django+Ajax实战

hkebao

1.看到网上这方面的资料比较少的。自己写点东西出来看看对将来有所整理帮助！
示例一：
前端
服务端：返回的是文本或是一段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+"'";//发送请求到的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;         
         }
    }
}
服务器端代码：
def ajax(request):   
    return HttpResponse("hello")
返回的是一段文本。
也可以是返回一段HTML代码请看：
def ajax(request):   
    return HttpResponse("123456")
直接生成一段HTML片段出来。则客户端一样是可以解析出来使用的！
还可以是从模型层中读取出来的数据拼结出来的数据返回到客户端如下：
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代码。
现在我将 部分放到客户端去。服务端只返回的是里面的内容
option 集合可返回包含  元素中所有  的一个数组。即返回的是一个数组。
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);         
         }
    }
}
客户端的解析函数直接使用了eval方法处理的！
服务端的代码：
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数据的！
解决上面的BUG。不能正常读取来自数据库的记录值 即：
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发现是gbk编码而我页面是UTF-8
解决方法整理：
第一步：原来我建表的时候是直接使用ORM创建的。而ORM创建的时候原来将表都设置成了GB2312
估计是数据库是GB2312的编码 而我的页面是UTF-8的编码所以不能正常转换过来的！
整理一下Python里面的编码函数：
result=result.decode("gbk").encode("utf-8")
上面的语句即是将结果按gbk解码，然后按utf-8编码。
decode表示这个字符串是按照什么进行解码。encode表示按照什么进行编码
（报的异常是：'ascii' codec can't decode byte 0xe8） 我的解决之道：
因为我的数据库是GB2312的编码。所以取出来是GB2312了。
而我的页面代码是UTF-8的编码所以。需要进行一次转码
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中的中间部分数据出来。
返回到了客户端再进行一次新的拼结出来！
完成select的联动AJAX！没用JQuery框架
               
               
               

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