【描述】

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

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

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

【实现】

网页端：

{% load static %}

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<script>

function loadXMLDoc(){

    var xmlhttp;

    if (window.XMLHttpRequest){

        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码

        xmlhttp=new XMLHttpRequest();

    }

    else{

        // IE6, IE5 浏览器执行代码

        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    }

    xmlhttp.onreadystatechange=function(){

        if (xmlhttp.readyState==4 && xmlhttp.status==200){

            //取到的内容：一个JSON对象。相当于一个python的列表，列表里面是嵌套的字典

            //[{"model": "cmdb.article", "pk": 1, "fields": {"title": "\u7b2c\u4e00\u4e2a\u6807\u9898", "content": "\u7b2c\u4e00\u6761\u5185\u5bb9\uff01\uff01\uff01"}}]

            var ret=JSON.parse(xmlhttp.responseText)

            //这里用.来取得对象的内容，之前没有考虑到是列表一直出现undefined的错误！

            document.getElementById("myDiv").innerHTML=(ret[0].fields.title);

        }

    }

    //这里url在django里面定义了，会用views.py里面的sendjson方法来处理请求

    xmlhttp.open("GET","/thejson/",true);

    xmlhttp.send();

}

</script>

</head>

<body>

<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>

<button type="button" onclick="loadXMLDoc()">修改内容</button>

</body>

</html>

Django服务端：

#Views.py

from django.shortcuts import render

from django.http import HttpResponse,JsonResponse

from django.core import serializers

import json

from . import models

# Create your views here.

def sendjson(request):

    articles= models.Article.objects.all()

    data= serializers.serialize("json", articles)

    print(data)

    #抄别人的写法。

    return HttpResponse(data,content_type="application/json")

def hello(request):

    return render(request,'index.html',locals())
#urls.py

from django.contrib import admin

from django.urls import path

from cmdb import views

urlpatterns = [

    path('admin/', admin.site.urls),

    path('index/', views.hello),

    path('thejson/',views.sendjson),

]
#Models.py

from django.db import models

# Create your models here.

class Article(models.Model):

    title=models.CharField(max_length=32,default='')

    content=models.TextField(null=True)

    #这里可以让admin后台的文章列表显示正确的文章标题

    def __str__(self):

        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. 监控MySQL|Redis|MongoDB的执行语句（go-sniffer）

    上节回顾:https://www.cnblogs.com/dotnetcrazy/p/9986873.html 以CentOS为例: 1.环境 PS:如果不需要Golang环境,可以编译后把执行文件c ...

  2. 2733: [HNOI2012]永无乡 线段树合并

    题目: https://www.lydsy.com/JudgeOnline/problem.php?id=2733 题解: 建n棵动态开点的权值线段树,然后边用并查集维护连通性,边合并线段树维护第k重 ...

  3. BSGS与扩展BSGS

    BSGS \(BSGS\)算法又称大步小步\((Baby-Step-Giant-Step)\)算法 \(BSGS\)算法主要用于解以下同余方程 \[A^x\equiv B(mod\ p)\]其中\(( ...

  4. （四）窗口mainwindow

    常用控件: lable: 可以放文本,图片,动态图片,链接 Text Edit: 富文本编辑框:多行文本,HTML,图片 Line Edit:  只能放一行 Plain Edit: 只能显示多行文本 ...

  5. Day047--JS BOM介绍, jQuery介绍和使用

    内容回顾 DOM 文档对象模型(model) 一个模型就是一个对象(属性和方法 面向对象的三大特性:封装 继承 多态) 为了可扩展性 DOM操作 标签属性操作 获取值 getAttribute() 设 ...

  6. Pandas系列（十三）-其他常用功能

    一.统计数据频率 1. values_counts pd.value_counts(df.column_name) df.column_name.value_counts() Series.value ...

  7. Kubernetes之DaemonSet控制器

    DaemonSet 简介 DaemonSet 确保全部(或者一些)Node 上运行一个 Pod 的副本.当有 Node 加入集群时,也会为他们新增一个 Pod .当有 Node 从集群移除时,这些 P ...

  8. 第六节：反射（几种写法、好处和弊端、利用反射实现IOC）

    一. 加载dll,读取相关信息 1. 加载程序集的三种方式 调用Assembly类下的三个方法:Load.LoadFile.LoadFrom. //1.1 Load方法:动态默认加载当前路径下的(bi ...

  9. Chrome firefox ie等浏览器空格&nbsp;宽度不一样

    用半角空格 或者全角空格   相当于半格中文字符的宽度, 相当于一个中文字符宽度. 注:在chrome中两个 占一个汉字的宽度;,而在IE.firefox中四个 才占一个汉字的宽度.

  10. linux 远程 telnet

    linux 远程 telnet [ root@test1 ~]# yum install telnet* (安装的三个包  xinetd . telnet-server.telnet)   [ roo ...