Django+Ajax实战

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框架

==================以下是一个实例=====================================

1.HTML层

<script type="text/javascript">     

     
     
   

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;     document.getElementById("areaid").options.length = 0;         var qurl = "/servers/newajax/?gameid="+i_option;     xmlHttp.open("GET", qurl, true);     xmlHttp.send(null); } //通过位置与服务器应用信息联合查询得到当前服务器的具体的位置出来返回到客户端通过JS实现服务器编号准确定位 function handleStateChange() {     if(xmlHttp.readyState == 4) {                      if(xmlHttp.status == 200) {             //遍历当前服务器编号的SELECT数组如果其值==这个值就被选中             var obj = document.getElementById('areaid');//注意这里面的obj             eval(xmlHttp.responseText);          }     } } </script>

游戏：

{% for product in  gamelist %}         {{product.gamename}}        {% endfor %}                游戏区：                 ---

==服务层代码

def newajax(request):
    gameid = request.GET.get('gameid','')
    result = "obj.options[obj.options.length] = new Option('---','0');\n"
    serverinfolist = Area.getAllServerInfo(gameid)
    for record in serverinfolist:
        area_id = record[0]
        area_name = record[1]
        result = result + "obj.options[obj.options.length] = new Option('%s','%s');\n"%(area_name,area_id)
    return HttpResponse(result)

阅读(900) | 评论(4) | 转发(0) |

0

上一篇：Django + JQuery实现AJAX功能

下一篇：监控机制

给主人留下些什么吧！~~

chinaunix网友2010-12-07 21:47:19

能够坚持十年的事情才有技术含量！

回复 | 举报

chinaunix网友2010-12-07 08:54:08

相信自己

回复 | 举报

chinaunix网友2010-12-07 08:33:36

要相信自己！

回复 | 举报

chinaunix网友2010-12-07 08:25:02

晚上整理一下。

回复 | 举报

评论热议

请登录后评论。

登录 注册

关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6