采用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扩展中脚本的运行机制 ...
随机推荐
- 如何打造千万级Feed流系统
from:https://www.cnblogs.com/taozi32/p/9711413.html 在互联网领域,尤其现在的移动互联网时代,Feed流产品是非常常见的,比如我们每天都会用到的朋友圈 ...
- Git学习笔记(三)
Git提交相关内容 在Git提交时,会保存一个提交对象,该对象包括一个指向暂存区内容快照的指针,包括本次提交作者等相关附属信息,包括零个或多个指向该提交对象的父对象指针:首次提交时是没有祖先,普通提交 ...
- Java -- 异常的捕获及处理 -- 自定义异常类
7.4 自定义异常类 定义异常类只需要继承Exception类即可. 例:自定义异常类 Class : MyException package limeThrowable._7_4; public c ...
- mysql字段集合中如何去除其中一个元素
在一对多方案中,我们用逗号拼接进行存储,避免存储多条,或者分表,那么此时出现了存储上如果需要修改的话 就带来了难度,比如规则记录表如下 如果2号规则被删除,那么这张表的所有有2的记录也要被清除掉,此时 ...
- 如何使用Web Service新建和更新Wiki页面的内容
公司内部有很多部门都创建了Wiki库,来做知识共享.公司是Hosting的SharePoint环境,不能写服务器端代码,要操作Wiki只能通过Web Service来完成,所以,碰到两个情况: 1)W ...
- 基于Elasticsearch 5.4.3的商品搜索系统
源码已提交至http://github.com
- React Native(十三)——ios键盘挡住textInput
渐入佳境 用React Native重构的项目也快接近尾声,剩下的就是适配ios的功能了.慢慢地也从中琢磨出了一点门道,于是就遇见了键盘遮挡textInput问题斑斑: 正常页面: android点击 ...
- codeblocks编码设置
注意编码统一,即文件编码和编译时的编码统一即可. codeblock13.12下: 文件编码: setting -> editor ->general setting -> othe ...
- 使用java发送QQ邮件
使用java发送邮件的时候,需要先下载两个jar包,连接如下: JavaMail mail.jar 1.4.5 JAF(版本 1.1.1) activation.jar 然后将这连个包导入,博主用的是 ...
- 在mac终端先打开mysql
以打开xampp下的mysql为例: mysql执行文件是放在bin目录下的,不要cd bin后键入mysql,而应该直接在bin的上级目录时键入bin/mysql,这样才能进入到mysql命令行模式 ...