采用jquery同django实现ajax通信
在网页访问中通过HTTP协议中的get/post文件发送数据或请求。在浏览器中输入url后,浏览器就会帮助我们完成请求的发送和返回,并刷新更新界面。但是,如果我们不想更新界面,仅仅是发送一个get/post文件数据(请求)传给服务器,然后获取服务器返回的response文件,这时就可以用ajax技术实现。
实现ajax的方法:1)采用原生的javascript发送,比较麻烦;2)使用jquery封装好了ajax方法
views.py视图函数,编写逻辑代码
from django.shortcuts import render
from django.http import HttpResponse
import json
# Create your views here. # def index(request):
# lists = ['a', 'b', 'c']
# dicts = {'a': 'apple', 'b': 'banana'}
#
# return render(request, 'home.html', {
# 'lists': json.dumps(lists),
# 'dicts': json.dumps(dicts),
# })
def index(request):
return render(request, 'home.html') def add(request):
a = request.GET['a']
b = request.GET['b']
c = int(a)+int(b)
return HttpResponse(str(c)) # def add(request):
# a = request.GET['a']
# b = request.GET['b']
# c = int(a)+int(b)
# return_json = {"result": c}
# return HttpResponse(json.dumps(return_json), content_type='application/json')
home.html访问页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/add/" method="get"> a:<input type="text" name="a" id="a"><br>
b:<input type="text" name="b" id="b"><br>
<p>result:<span id="result"></span></p>
<button type="button" id="sum">Calc</button>
</form> <script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#sum").click(function () {
var a = $('#a').val();
var b = $('#b').val(); $.get("/add/", {'a':a, 'b':b}, function (ret) {
$("#result").html(ret)
})
});
});
</script>
</body>
</html>
urls.py进行地址映射
"""my_query URL Configuration The `urlpatterns` list routes URLs to views. For more information please see:
https://docs.djangoproject.com/en/dev/topics/http/urls/
Examples:
Function views
1. Add an import: from my_app import views
2. Add a URL to urlpatterns: path('', views.home, name='home')
Class-based views
1. Add an import: from other_app.views import Home
2. Add a URL to urlpatterns: path('', Home.as_view(), name='home')
Including another URLconf
1. Import the include() function: from django.urls import include, path
2. Add a URL to urlpatterns: path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from blog import views urlpatterns = [
path('admin/', admin.site.urls),
path('index/', views.index),
path('add/', views.add),
]
参考:http://blog.csdn.net/autoliuweijie/article/details/50291357
采用jquery同django实现ajax通信的更多相关文章
- vue和jQuery嵌套实现异步ajax通信
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- Django如何与ajax通信
示例一 文件结构 假设你已经创建好了一个Django项目和一个App,部分结构如下: mysite myapp |___views.py |___models.py |___forms.py |___ ...
- Django之ajax(jquery)封装(包含 将 csrftoken 写入请求头方法)
由于支持问题,未使用 es6 语法 _ajax.js /** * 发起请求 * @param url 请求地址 * @param data 请求数据 { } json格式 * @param type ...
- Django 之Ajax&Json&CORS&同源策略&Jsonp用法
什么是Json 定义: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范)的一个子集 ...
- Django与 Ajax
什么是json? 定义: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范)的一个子 ...
- Django 之Ajax
必备知识:json 什么是json 定义 JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式. 它基于 ECMAScript (w3c制定的 ...
- 关于试用jquery的jsonp实现ajax跨域请求数据的问题
我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...
- Comet 反Ajax: jQuery与PHP实现Ajax长轮询
原文地址(http://justcode.ikeepstudying.com/2016/08/comet-%E5%8F%8Dajax-%E5%9F%BA%E4%BA%8Ejquery%E4%B8%8E ...
- 采用指数退避算法实现ajax请求的重发,全部完成时触发回调函数
目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...
随机推荐
- Linux查看系统进程
1. 在 LINUX 命令平台输入 1-2 个字符后按 Tab 键会自动补全后面的部分(前提是要有这个东西,例如在装了 tomcat 的前提下, 输入 tomcat 的 to 按 tab).2. ps ...
- Oracle 常用函数备查
ORACLE日期时间函数大全 TO_DATE格式(以时间:2007-11-02 13:45:25为例) Year: yy two digits 两位年 显示值:07 yyy three digits ...
- Django 添加应用
一个项目可以添加多个应用,可以使用以下两种方法来添加应用: [root@localhost web]$ python manage.py startapp blog [root@localhost w ...
- thinkjs中修改默认主键
报错信息: { Error: ER_BAD_FIELD_ERROR: Unknown column 'a_role.id' in 'field list' 还原场景: a_role这张表没有自增的id ...
- ANDROID – TOOLBAR STEP BY STEP(转)
今年(2014) 的 Google I/O 發表令多數人為之一亮的 Material Design,而 Google 也從「Google I/O 2014」 開始,大家也陸陸續續地看到其更新的 And ...
- 【本周主题】第一期:JavaScript单线程与异步
相信下边这个图一定都不陌生,本周就围绕这张图深入了解下js代码执行时的来龙去脉. 一.JavaScript是单线程的 2018-11-19 21:21:21 周一 js本质是单线程的.这一特性是jav ...
- 零基础读懂视频播放器控制原理——ffplay播放器源代码分析
版权声明:本文由张坤原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/535574001486630869 来源:腾云阁 ht ...
- DIV高度自适应及注意问题(转)
本文和大家重点讨论一下DIV高度自适应及注意问题,主要包括父div高度随子div的高度改变而改变和子div高度随父亲div高度改变而改变两种情况. DIV高度自适应及注意问题 积累了一些经验,总结出一 ...
- 关于ASP.NET和.NET的区别和联系
对于一个新手,往往会被这些名字给搞蒙了,对不起(笨小孩我也被搞蒙过,见笑啦),这归根结底还是怪自己对知识掌握和了解的不够,废话不多,直接到主题. ASP.NET和.NET的区别和联系 .NET 一般所 ...
- jquery validator
jQuery.validate是一款非常不错的表单验证工具,简单易上手,而且能达到很好的体验效果,虽然说在项目中早已用过,但看到这篇文章写得还是不错的,转载下与大家共同分享. 一.用前必备 官方网站: ...