【描述】

1.Server端定义了两个字段：Article.title 和 Article.content

2.客户端用JavaScript Ajax异步加载请求服务器的JSON数据

效果是点击按钮从服务器的数据库取得第一篇文章的标题

【实现】

网页端：

  1. {% load static %}
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <script>
  7. function loadXMLDoc(){
  8.     var xmlhttp;
  9.     if (window.XMLHttpRequest){
  10.         //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  11.         xmlhttp=new XMLHttpRequest();
  12.     }
  13.     else{
  14.         // IE6, IE5 浏览器执行代码
  15.         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  16.     }
  17.     xmlhttp.onreadystatechange=function(){
  18.         if (xmlhttp.readyState==4 && xmlhttp.status==200){
  19.             //取到的内容：一个JSON对象。相当于一个python的列表，列表里面是嵌套的字典
  20.             //[{"model": "cmdb.article", "pk": 1, "fields": {"title": "\u7b2c\u4e00\u4e2a\u6807\u9898", "content": "\u7b2c\u4e00\u6761\u5185\u5bb9\uff01\uff01\uff01"}}]
  21.             var ret=JSON.parse(xmlhttp.responseText)
  22.             //这里用.来取得对象的内容，之前没有考虑到是列表一直出现undefined的错误！
  23.             document.getElementById("myDiv").innerHTML=(ret[0].fields.title);
  24.         }
  25.     }
  26.     //这里url在django里面定义了，会用views.py里面的sendjson方法来处理请求
  27.     xmlhttp.open("GET","/thejson/",true);
  28.     xmlhttp.send();
  29. }
  30.  
  31. </script>
  32. </head>
  33. <body>
  34.  
  35. <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
  36. <button type="button" onclick="loadXMLDoc()">修改内容</button>
  37.  
  38. </body>
  39. </html>

Django服务端：

  1. #Views.py
  2.  
  3. from django.shortcuts import render
  4. from django.http import HttpResponse,JsonResponse
  5. from django.core import serializers
  6. import json
  7. from . import models
  8. # Create your views here.
  9. def sendjson(request):
  10.     articles= models.Article.objects.all()
  11.     data= serializers.serialize("json", articles)
  12.     print(data)
  13.     #抄别人的写法。
  14.     return HttpResponse(data,content_type="application/json")
  15.  
  16. def hello(request):
  17.     return render(request,'index.html',locals())
  1. #urls.py
  2.  
  3. from django.contrib import admin
  4. from django.urls import path
  5. from cmdb import views
  6.  
  7. urlpatterns = [
  8.     path('admin/', admin.site.urls),
  9.     path('index/', views.hello),
  10.     path('thejson/',views.sendjson),
  11. ]
  1. #Models.py
  2.  
  3. from django.db import models
  4.  
  5. # Create your models here.
  6. class Article(models.Model):
  7.     title=models.CharField(max_length=32,default='')
  8.     content=models.TextField(null=True)
  9.  
  10.     #这里可以让admin后台的文章列表显示正确的文章标题
  11.     def __str__(self):
  12.         return self.title

Django & JavaScript 用Ajax实现JSON数据的请求和响应的更多相关文章

  1. python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)

    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...

  2. Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件

    一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...

  3. Django之AJAX传输JSON数据

    目录 Django之AJAX传输JSON数据 AJAX 中 JSON 数据传输: django响应JSON类型数据: django 响应 JSON 类型数据: Django之AJAX传输JSON数据 ...

  4. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  5. jquery ajax返回json数据进行前后台交互实例

    jquery ajax返回json数据进行前后台交互实例 利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码 代码如 ...

  6. ThinkPHP中使用ajax接收json数据的方法

    本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先 ...

  7. Struts2.5 利用Ajax将json数据传值到JSP

    AJAX +JSON=>JSP AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着 ...

  8. Ajax传递json数据简介和一个需要注意的小问题

    Ajax传递json数据 Ajax操作与json数据格式在实际中的运用十分广泛,本文为大家介绍一个两者相结合的小案例: 项目结构 我们新建一个Django项目,在里面创建一个名为app01的应用: p ...

  9. JS-利用ajax获取json数据，并传入页面生成动态tab

    封装好的:ajax.js function ajax(url, fnSucc,fnFaild){ //1[创建] if(window.XMLHttpRequest){ var oAjax = new ...

随机推荐

  1. 探索 Python 学习

    Python 是一种敏捷的.动态类型化的.极富表现力的开源编程语言,可以被自由地安装到多种平台上(参阅 参考资料).Python 代码是被解释的.如果您对编辑.构建和执行循环较为熟悉,则 Python ...

  2. 【并发编程】【JDK源码】JDK的（J.U.C）java.util.concurrent包结构

    本文从JDK源码包中截取出concurrent包的所有类,对该包整体结构进行一个概述. 在JDK1.5之前,Java中要进行并发编程时,通常需要由程序员独立完成代码实现.当然也有一些开源的框架提供了这 ...

  3. 05VueCli

    详情请见: https://pizzali.github.io/2018/10/30/VueCli/ Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,Vue CLI 致力于将 Vue ...

  4. CF809E Surprise me!（莫比乌斯反演+Dp（乱搞？））

    题目大意: 给你一棵树,树上的点编号为\(1-n\).选两个点\(i.j\),能得到的得分是\(\phi(a_i*a_j)*dis(i,j)\),其中\(dis(i,j)\)表示\(a\)到\(b\) ...

  5. python学习day10 函数Ⅱ(参数&作用域)

    函数Ⅱ(参数&作用域) 知识小结: py2与py3的区别 逻辑运算()>not>and>or 字符串翻转切片翻转 is与==区别 git相关 数据类型判断 操作系统:cent ...

  6. 转载：ORA-12516 “TNS监听程序找不到符合协议堆栈要求的可用处理程序” 解决方案

    ORA-12516 “TNS监听程序找不到符合协议堆栈要求的可用处理程序” 解决方案   简单描述一下场景,总共两台应用服务器,每台安装3个tomcat进行集群,并通过nginx做了负载均衡,今天在生 ...

  7. qml ： qml控件自适应；

    import QtQuick 2.4 Item { property var targetItem: parent property bool fixedAspectRatio: true // El ...

  8. require.js使用教程

    require.js使用教程 下载require.js, 并引入 官网: http://www.requirejs.cn/ github : https://github.com/requirejs/ ...

  9. .net Core 下数据库访问

    SqlSugar :是一款高性能(达到ADO.NET最高性能水平)SqlSugar :是除EF外拉姆达解析最完善的ORM,多表 .UnionALL. 交叉子查询.真实的批量操作和分页SqlSugar ...

  10. split host

    # encoding:utf-8 _portprog = None def split_host_port(host): """ split the host :para ...