`
chqich73
  • 浏览: 5492 次
  • 性别: Icon_minigender_1
  • 来自: 成都
最近访客 更多访客>>
社区版块
存档分类
最新评论

Django+AJAX实例

阅读更多
1.看到网上这方面的资料比较少的。自己写点东西出来看看对将来有所整理帮助!
示例一:
前端<div>
服务端:返回的是文本或是一段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;          
         }
    }
}
<div id = "np_server_serial"></div>
服务器端代码:
def ajax(request):   
    return HttpResponse("hello")
返回的是一段文本。
也可以是返回一段HTML代码请看:
def ajax(request):   
    return HttpResponse("<select><option>123</option><option>456</option></select>")
直接生成一段HTML片段出来。则客户端一样是可以解析出来使用的!

还可以是从模型层中读取出来的数据拼结出来的数据返回到客户端如下:
def ajax(request):
    i_option = request.GET.get('i_option','')
    result = "<select>"
    serverinfolist = ServerInfo.getAllServerInfo(i_option)
    for record in serverinfolist:
        i_serverserial = record[1]
        result = result + "<option>%s</option>"%(i_serverserial)        
    result = result + "</select>"
    return HttpResponse(result)
直接是一段<select>的HTML代码。

现在我将<select> 部分放到客户端去。服务端只返回的是<option>里面的内容

option 集合可返回包含 <select> 元素中所有 <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中的中间部分数据出来。
返回到了客户端再进行一次新的拼结出来!

分享到:
评论

相关推荐

    Django + jquery + json 实例实现 在此记录

    在本实例中,我们将探讨如何使用Django框架与jQuery库以及JSON数据格式来构建一个功能性的Web应用。Django是一个强大的Python Web框架,它提供了一整套解决方案来处理后端逻辑,而jQuery则是一个广泛使用的...

    pyecharts_Django_Ajax_web前后端分离demo.zip

    "pyecharts_One"可能是一个Django应用或者一个单独的Pyecharts图表实例。要运行此项目,你需要将这个文件解压到你的Django项目目录下,配置好数据库连接,然后运行Django服务器。接着,在浏览器中访问服务器地址,就...

    python+Django+layui 实现web 列表增删改查

    在这个实例中,Django主要负责处理HTTP请求,提供模板引擎来渲染HTML页面,以及管理数据库交互。 2. **模型(Model)**: Django中的模型是与数据库交互的主要接口。虽然在描述中没有具体提及,但在实际项目中,...

    django+js+ajax实现刷新页面的方法

    本文实例讲述了django+js+ajax实现刷新页面的方法。分享给大家供大家参考,具体如下: 在服务器开发的时候,为了方便将服务器对外开一个接口来操作,可以使用django制作网页,通过页面来操作服务器。这样可以将...

    Django+Ajax+jQuery实现网页动态更新的实例

    总结来说,这个实例展示了如何结合Django后端、Ajax和jQuery前端技术实现动态网页更新。用户在前端输入查询,Ajax请求被发送到Django服务器,服务器处理请求并返回数据,然后jQuery将数据更新到网页上,所有这些都在...

    基于vue-cli+Django+sqlite3的学生管理系统

    总之,“基于Vue CLI+Django+SQLite3的学生管理系统”是一个融合了前端与后端技术的实例,涵盖了从数据库设计到前后端通信的多个关键知识点,对于初学者来说,是一个很好的学习和实践平台。通过这个项目,开发者可以...

    Django1.7+JQuery+Ajax验证用户注册集成小例子

    下面是散仙使用Django+Jquery+Ajax的方式来模拟实现了一个验证用户注册时,用户名存在不存在的一个小应用。注意,验证存在不存在使用的是Ajax的方式,不用让用户点击按钮验证是否存在。 截图如下: 页面HTML代码...

    python+django+vue开发的酒店预订管理系统 - 毕业设计 - 课程设计.zip

    这里涉及到前后端的交互,Vue可以通过Ajax向Django后台发送请求,获取并显示实时的预订信息。 4. 订单管理模块:用户可以查看、修改、取消订单,后台需要处理订单状态的变更并通知用户。 5. 管理员模块:管理员可以...

    基于python+Django的图书管理系统 Python+Django+sqlite.zip

    本项目“基于Python+Django的图书管理系统”是一个典型的Web应用程序实例,它利用Python的Django框架和SQLite数据库来实现一个功能完善的图书管理平台。以下是对该项目的详细解析: 1. **Python**: - Python是一...

    基于python+django+vue搭建博客系统.zip

    - 后端与前端通信:通过API接口(如RESTful API)实现前后端分离,使用Ajax或Fetch API进行异步请求。 - CSRF和XSS防护:Django提供了内置的安全机制,防止跨站请求伪造和跨站脚本攻击。 在这个毕业设计项目中,...

    Django+Vue.js实现在线店铺.zip

    在本项目中,"Django+Vue.js实现在线店铺.zip" 是一个结合了 Django 后端框架和 Vue.js 前端框架来构建电子商务平台的源码实例。这个项目展示了如何利用这两种技术来创建一个功能完备的在线商店,提供用户购物、商品...

    django项目实例(django 简易博客开发)

    前几天写的django 简易...django 简易博客开发 4 comments库使用及ajax支持 http://www.cnblogs.com/cacique/archive/2012/10/03/2710803.html django 简易博客开发 5 markdown支持、代码高亮、gravatar头像服务 ...

    django通过ajax发起请求返回JSON格式数据的方法

    本文实例讲述了django通过ajax发起请求返回JSON格式数据的方法。分享给大家供大家参考。具体实现方法如下: 这是后台处理的: def checkemail(request): user = None if request.POST.has_key('email'): ...

    django-js实例

    **Django-JS实例详解** 在现代Web开发中,Django和JavaScript是两个不可或缺的工具。Django,作为Python的一款强大Web框架,以其高效的MVT(Model-View-Template)设计模式著称,而JavaScript则作为客户端编程的...

    Django forms表单 select下拉框的传值实例

    在Django框架中,表单(forms)是处理用户输入数据的重要工具,它简化了前后端交互的过程。本文将深入探讨如何在Django forms中创建一个包含`select`下拉框的表单,并且理解其传值机制。 首先,我们需要在`forms.py...

    Python3.5,django1.10实用例子2

    在本项目"Python3.5,django1.10实用例子2"中,我们将深入探讨如何利用Python 3.5和Django 1.10框架进行高效开发,特别是涉及AJAX、线程(thread)以及子进程(subprocess)调用系统命令的技术。这个项目可能包含一...

    Django处理Ajax发送的Get请求代码详解

    Django处理Ajax发送的Get请求实例,Ajax优点在一是异步请求,无需等待响应就可以再次发起请求,而是局部刷新,避免整个页面刷新的网页闪动。 打开命令行窗口,输入命令,创建django工程: django-admin startproject...

    使用AJAX和Django获取数据的方法实例

    AJAX提供了一种将GET或POST请求发送到Django视图并接收任何返回的数据而无需刷新页面的方法。 现代JavaScript包含fetch API,该API为我们提供了一种纯JavaScript方式来发送AJAX请求。 让我们看一下如何通过获取发出...

    bibabijoux_client:Webapp客户端-Django + angular应用程序示例

    【标题】"bibabijoux_client:Webapp客户端-Django + Angular应用程序示例"揭示了这个项目是一个结合了Django后端框架与Angular前端框架的Web应用实例。Django是Python开发的开源Web框架,而Angular是Google维护的...

Global site tag (gtag.js) - Google Analytics