Django & JavaScript 用Ajax实现JSON数据的请求和响应
【描述】
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数据的请求和响应的更多相关文章
- python 全栈开发,Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)
昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...
- Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件
一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...
- Django之AJAX传输JSON数据
目录 Django之AJAX传输JSON数据 AJAX 中 JSON 数据传输: django响应JSON类型数据: django 响应 JSON 类型数据: Django之AJAX传输JSON数据 ...
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法,绑定,each循环,ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
- jquery ajax返回json数据进行前后台交互实例
jquery ajax返回json数据进行前后台交互实例 利用jquery中的ajax提交数据然后由网站后台来根据我们提交的数据返回json格式的数据,下面我来演示一个实例. 先我们看演示代码 代码如 ...
- ThinkPHP中使用ajax接收json数据的方法
本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先 ...
- Struts2.5 利用Ajax将json数据传值到JSP
AJAX +JSON=>JSP AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着 ...
- Ajax传递json数据简介和一个需要注意的小问题
Ajax传递json数据 Ajax操作与json数据格式在实际中的运用十分广泛,本文为大家介绍一个两者相结合的小案例: 项目结构 我们新建一个Django项目,在里面创建一个名为app01的应用: p ...
- JS-利用ajax获取json数据,并传入页面生成动态tab
封装好的:ajax.js function ajax(url, fnSucc,fnFaild){ //1[创建] if(window.XMLHttpRequest){ var oAjax = new ...
随机推荐
- [NOI2009]变换序列(二分图匹配)
我们先不考虑字典序最小,先来求出一种可行解. 不难发现,对于每一个i值,它所对应的T值在模n意义下最多两个,于是我们可以用二分图匹配来判断. 那字典序最小呢? 回顾一下二分图匹配的算法:网络流?貌似不 ...
- 用beam实现连接kafka和elasticSearch示例 在flink平台运行
示例实现beam用java编程,监听kafka的testmsg主题,然后将收取到的单词,按5秒做一次统计.结果输出到outputmessage 的kafka主题,同时同步到elasticSearch. ...
- Springboot 4.Springboot 集成SwaggerUi
SwaggerUi就是自动生成接口文档的这么一个类似于插件的工具,可以直接访问接口. 首先打开pom文件,将插件引进来,然后增加一个属性<properties>,用来设置版本号的,然后直接 ...
- 打怪升级之路—Security+认证通关攻略(401还是501)
我花了一个月才把题目过完一遍的(这一个月都上班,下班抽空做几页),这里面走了很多弯路,我把备考过程整理出来希望对大家有帮助. 我是在2019年1月完成的Security+考试,离安全牛课堂直播培训结束 ...
- 使用catboost解决ML中高维度不平衡数据集挑战的解决方案
python风控评分卡建模和风控常识(博客主亲自录制视频教程) https://study.163.com/course/introduction.htm?courseId=1005214003&am ...
- 四十九、进程间通信——System V IPC 之消息队列
49.1 System V IPC 介绍 49.1.1 System V IPC 概述 UNIX 系统存在信号.管道和命名管道等基本进程间通讯机制 System V 引入了三种高级进程间通信机制 消息 ...
- Delete from join 用法
delete (别名) from tblA (别名) left join tblb (别名) on...用法 1.创建使用的表及数据 CREATE TABLE YSHA ( code ), NAME ...
- html 超链接标签 锚点 a标签伪类
一个简易的连接 <a href="01.html">01</a> <body> <a href="01.html" t ...
- Ansible------常用功能
local_action Ansible 默认只会对控制机器执行操作,但如果在这个过程中需要在 Ansible 本机执行操作就需要使用到local_action become:True Ansible ...
- POJ 2031 Building a Space Station (计算几何+最小生成树)
题目: Description You are a member of the space station engineering team, and are assigned a task in t ...