采用jquery同django实现ajax通信

时间:2022-09-25 14:00:00

在网页访问中通过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通信的更多相关文章

  1. vue和jQuery嵌套实现异步ajax通信

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  2. Django如何与ajax通信

    示例一 文件结构 假设你已经创建好了一个Django项目和一个App,部分结构如下: mysite myapp |___views.py |___models.py |___forms.py |___ ...

  3. Django 之Ajax&amp&semi;Json&amp&semi;CORS&amp&semi;同源策略&amp&semi;Jsonp用法

    什么是Json 定义: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范)的一个子集 ...

  4. Django与 Ajax

    什么是json? 定义: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范)的一个子 ...

  5. Django 之Ajax

    必备知识:json 什么是json 定义 JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式. 它基于 ECMAScript (w3c制定的 ...

  6. 关于试用jquery的jsonp实现ajax跨域请求数据的问题

    我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...

  7. Comet 反Ajax&colon; jQuery与PHP实现Ajax长轮询

    原文地址(http://justcode.ikeepstudying.com/2016/08/comet-%E5%8F%8Dajax-%E5%9F%BA%E4%BA%8Ejquery%E4%B8%8E ...

  8. 采用指数退避算法实现ajax请求的重发,全部完成时触发回调函数

    目录: 0.Chrome扩展开发(Gmail附件管理助手)系列之〇——概述 1.Chrome扩展开发之一——Chrome扩展的文件结构 2.Chrome扩展开发之二——Chrome扩展中脚本的运行机制 ...

  9. 不借助jquery封装好的ajax,你能用js手写ajax框架吗

    不借助jquery封装好的ajax,你能手写ajax框架吗?最基础的ajax框架,一起来围观吧. .创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); ...

随机推荐

  1. centos 6&period;7 搭建tornado &plus; nginx &plus; supervisor的方法(已经实践)

    首先,本来不想写这篇博客了,但是我测试了很多网上的例子包括简书的,全不行,我总结原因是自己太笨,搞了俩个晚上,后来决定,自己还是写一篇记录下来,保证自己以后使用 环境: centos6.7 64 py ...

  2. PHP socket编程需要了解的一些基本知识

    前面讲到了 fsockopen 的各种情况,其中涉及了很多其它知识,比如chunked分段传输,Keep-Alive,HTTP头字段等额外的知识,如果对这些知识一知半解,会影响对 PHP 的 sock ...

  3. 【转】POP3、SMTP和IMAP之间的区别和联系

    POP3 POP3是Post Office Protocol 3的简称,即邮局协议的第3个版本,它规定怎样将个人计算机连接到Internet的邮件服务器和下载电子邮件的电子协议.它是因特网电子邮件的第 ...

  4. &lbrack;翻译&rsqb; - &lt&semi;Entity Framework&gt&semi; - 直接执行数据库命令

    原文:[翻译] - <Entity Framework> - 直接执行数据库命令 纯属学习上的记录, 非专业翻译, 如有错误欢迎指正! 原文地址: http://msdn.microsof ...

  5. &lbrack;置顶&rsqb; ios App 中嵌入应用商店

    昨晚同事拿了一个app 发现其app 内部页面打开了appstore 并没有唤起手机自带的appstore, 刚开始以为是用webview 加载的 ,可是自己些了一个demo 发现并不是那样一回事 用 ...

  6. USACO奶牛博览会&lpar;DP&rpar;

    Description 奶牛想证明他们是聪明而风趣的.为此,贝西筹备了一个奶牛博览会,她已经对N头奶牛进行了面试,确定了每头奶牛的智商和情商. 贝西有权选择让哪些奶牛参加展览.由于负的智商或情商会造成 ...

  7. Oracle&comma;Sql&comma;procedure 感觉自己写的很棒的一个存储过程

    感觉自己写的很棒的一个Oracle存储过程,(其实想说很叼^,^). 集成了一堆操作数据的功能(至少几十), 包括存储过程执行异常信息输出帮助诊断. 亮点很多, 比如`over(partition b ...

  8. 熟悉常用的HDFS操作

    编程实现以下指定功能,并利用Hadoop提供的Shell命令完成相同任务: 在本地Linux文件系统的“/home/hadoop/”目录下创建一个文件txt,里面可以随意输入一些单词. 在本地查看文件 ...

  9. &period;NET BackgroundWorker的一般使用方式

    代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data ...

  10. mysql 设置隔离级别

    查看隔离级别: mysql> select @@tx_isolation; +-----------------+ | @@tx_isolation | +-----------------+ ...