【描述】

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. [Nmap] Regular script

    out of date: TCP:nmap.exe -sC -sS -sV -p 1-65535 -A -v -v -oX filename.xml ip UDP:nmap.exe -sC -sU - ...

  2. CF757E Bash Plays with Functions

    题解 q<=1e6,询问非常多.而n,r也很大,必须要预处理所有的答案,询问的时候,能比较快速地查询. 离线也是没有什么意义的,因为必须递推. 先翻译$f_0(n)$ $f_0(n)=\sum_ ...

  3. Zabbix通过JMX方式监控java中间件

    Zabbix2.0添加了支持用于监控JMX应用程序的服务进程,称为“Zabbix-Java-gateway”:它是用java写的一个程序. 工作原理: zabbix_server想知道一台主机上的特定 ...

  4. Spring MVC -- Spring框架入门（IoC和DI）

    Spring MVC是Spring框架中用于Web应用开发的一个模块.Spring MVC的MVC是Model-View-Controller的缩写.它是一个广泛应用于图像化用户交互开发中的设计模式, ...

  5. 我眼中的支持向量机（SVM）

    看吴恩达支持向量机的学习视频,看了好几遍,才有一点的理解,梳理一下相关知识. (1)优化目标: 支持向量机也是属于监督学习算法,先从优化目标开始.   优化目标是从Logistics regressi ...

  6. HDU 1584(蜘蛛牌 DFS)

    题意是在蜘蛛纸牌的背景下求 10 个数的最小移动距离. 在数组中存储 10 个数字各自的位置,用深搜回溯的方法求解. 代码如下: #include <bits/stdc++.h> usin ...

  7. H5_0001：localStorage本地存储

    localStorage的优势 1.localStorage拓展了cookie的4K限制 2.localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数 ...

  8. numpy&pandas基础

    numpy基础 import numpy as np 定义array In [156]: np.ones(3) Out[156]: array([1., 1., 1.]) In [157]: np.o ...

  9. 纯css美化下拉框、复选框以及单选框样式并用jquery获取到其被选中的val

    具体样式如图所示: 注:获取val值时记得要先引入jquery库奥. 1.下拉框 css部分 #cargo_type_id{ font-size: 13px; border: solid 1px #b ...

  10. PHP中ajax返回数据类型为JSON数据的处理

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...