创建项目 ajax

  • 命令行创建:
django-admin startproject mysite
  • pycharm创建:
    File --> New project --> 左侧选Django --> 右侧填项目路径,并且勾选python.exe

启动应用 app01

python manage.py startapp app01

配置 settings.py

INSTALLED_APPS = [# 注册应用 app01'app01.apps.App01Config',# or'app01',
]........MIDDLEWARE = [......# 处理 csrf# 'django.middleware.csrf.CsrfViewMiddleware',......
]........TEMPLATES = [{......# 检查模板路径配置'DIRS': [os.path.join(BASE_DIR, 'templates')]......},
]........# 如需要连接数据库，通过下面的方法进行配置连数据库连接，本实例没有连接数据库
# Database
# https://docs.djangoproject.com/en/1.11/ref/settings/#databases#DATABASES = {
#    'default': {
#        'ENGINE': 'django.db.backends.mysql',
#        'NAME': 'blog',
#        'USER': 'scm',
#        'PASSWORD': '123456',
#        'HOST': '192.168.27.100',
#        'PORT': '3306',
#    }
#}........# Internationalization
# https://docs.djangoproject.com/en/1.11/topics/i18n/LANGUAGE_CODE = 'zh-Hans'#'en-us'TIME_ZONE = 'Asia/Shanghai'#'UTC'........# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/STATIC_URL = '/static/'
# 配置静态文件的路径
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static"),
]........# 配置控制台打印SQL语句，连接数据库的时候，用来查看具体执行的SQL语句是什么
#LOGGING = {
#    'version': 1,
#    'disable_existing_loggers': False,
#    'handlers': {
#        'console': {
#            'class': 'logging.StreamHandler',
#        },
#    },
#    'loggers': {
#        'django': {
#            'handlers': ['console'],
#            'level': 'DEBUG',
#        },
#    },
#}

在项目根目录下创建目录 static, 将 jquery-3.2.1.min.js 拷贝到 static 下面。

配置 ajax/__init__.py (需要连接数据库的时候才配置)

由于django-1.11 版本不支持mysqldb引擎，所以需要使用pymysql替代mysqldb引擎

import pymysql
pymysql.install_as_MySQLdb()

配置 ajax/urls.py

from django.conf.urls import url, includeurlpatterns = [url(r'^admin/', admin.site.urls),url(r'^app01/', include('app01.urls')),
]

配置 app01/urls.py

urlpatterns = [url(r'^test/$', views.test),url(r'^test_ajax/$', views.test_ajax),
]

app01/views.py 代码

from django.shortcuts import render, HttpResponse# Create your views here.def test(request):return render(request, 'test.html')def test_ajax(request):print(request)v1 = request.POST.get('v1')v2 = request.POST.get('v2')name = request.POST.get('name')age = request.POST.get('age')# v1 = request.GET.get('v1')# v2 = request.GET.get('v2')# name = request.GET.get('name')# age = request.GET.get('age')ret = int(v1) + int(v2)print(v1)print(v2)print(ret)print('-' * 30)print('{}:{}'.format(name, age))return HttpResponse(ret)

在 templates 下创建 html 文件 test.html

  • 写法1
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body><input type="text" id="i1" placeholder="v1"> +
<input type="text" id="i2" placeholder="v2"> =
<input type="text" id="i3" placeholder="ret=v1+v2">
<!--<button id="submit">AJAX请求</button>-->
<input type="button" id="submit" value="AJAX请求"><script src="/static/jquery-3.2.1.min.js"></script>
<script>$("#submit").on("click", function () {$.post("http://127.0.0.1:8888/app01/test_ajax/",{'v1': $('#i1').val(), 'v2': $('#i2').val(), 'name': 'lady', 'age': 23},function (retdata) {console.log(retdata);$('#i3').val(retdata);});});
</script></body>
</html>
  • 写法2
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body><input type="text" id="i1" placeholder="v1"> +
<input type="text" id="i2" placeholder="v2"> =
<input type="text" id="i3" placeholder="ret=v1+v2">
<!--<button id="submit">AJAX请求</button>-->
<input type="button" id="submit" value="AJAX请求"><script src="/static/jquery-3.2.1.min.js"></script>
<script>$("#submit").on("click", function () {$.ajax({url: "/app01/test_ajax/",type: 'POST',data: {'v1': $('#i1').val(), 'v2': $('#i2').val(), name: 'lady', age: 23},success: function (retdata) {console.log(retdata);$('#i3').val(retdata);}});});
</script></body>
</html>

提示：

  • 以上两种写法中，get方法和post方法都可以通过 data 提交数据，

    • post 方法提交的时候是通过 Form Data 表单数据的方式提交的
    • get 方法提交的时候是通过 Query String 查询字符串的方式提交的
  • test.html文件中ajax请求的url可以是以下的两种方式：
    • url: "http://127.0.0.1:8888/app01/test_ajax/"
    • url: "/app01/test_ajax/"
  • test.html文件中的url必须要和Django中的路由urls.py中的url 一致；同时有后缀 '/' 或同时没有 "/", 否则回404.
    python urlpatterns = [ url(r'^test/$', views.test), url(r'^test_ajax/$', views.test_ajax), # 如果test.html中ajax请求的url有后缀 "/",那么这里一定也要有 '/' 后缀。 ]

启动server

python manage.py runserver

转载于:https://www.cnblogs.com/shichangming/p/10850366.html

JQuery之ajax异步请求Django后端相关推荐

  1. php中jquery ajax请求参数,浅谈Jquery中Ajax异步请求中的async参数的作用

    之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html asy.js function testAsync{ var temp; $.ajax( ...

  2. jquery的ajax异步请求接收返回json数据

    jquery的ajax异步请求接收返回json数据方法设置简单,一个是服务器处理程序是返回json数据,另一种就是ajax发送设置的datatype设置为jsonp格式数据或json格式都可以.这篇文 ...

  3. jQuery使用ajax异步请求400解决方法

    jQuery使用ajax异步请求访问状态码400解决方法: 先直接上结论:首先检查下自己使用的请求方式,我原来用的是post方式,更改为ajax之后就解决了,才反应过来应该是版本不兼容的问题! < ...

  4. jQuery实现Ajax异步请求的三种方式

    jQuery实现Ajax jQuery框架对js原生的ajax进行了封装,封装后的ajax相比原生就变的更加简洁方便,而且功能更加丰富 常用的三种ajax实现的方法: get:$.get(url,[d ...

  5. jquery实现ajax异步请求

    前端代码: <html> <head> <meta charset="UTF-8"> <title>异步请求</title&g ...

  6. javaWeb基础六：JQuery—Ajax异步请求

    JQuery 之 Ajax 异步请求 1.1 Ajax简介 1.1.1 不使用Ajax存在的问题 在发送请求得到响应时,我们常常只需要刷新网页局部的数据,而不是整个网页的资源(在网页资源过大时,效率会 ...

  7. python django异步访问_初试Ajax异步请求（基于Django框架）

    概要: Ajax异步请求数据之前就听朋友提起过,但是之前一直没有什么机会使用这个技术,就没有去了解,后面在做网站评论这一功能时,为了使用户评论之后不用刷新网页就能够看到刚刚评论的数据,所以决定使用Aj ...

  8. 请求对象触碰jQuery：AJAX异步详解

    最近一直在研究请求对象之类的问题,现在正好有机会和大家讨论一下. 传送门:异步编程系列目录-- 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous Java ...

  9. SpringMVC @RequestBody和@ResponseBody注解 以及 Ajax异步请求

    实例讲解: 1.先创建一个实体类Student: public class Student {private String sname;private String password;private ...

最新文章

  1. pythondocx模板_python操作docx文档（转）
  2. .NET Core 2.2 新增部分功能使用尝鲜
  3. * IO流递归拷贝一个文件夹 按源文件夹格式拷贝
  4. Detectron2 win10踩坑记录
  5. python资源分配算法_DRL based Resource Allocation Framework
  6. 【读书笔记】—— 《从 0 到 1》
  7. 任意切换线程的工具类
  8. 再谈指标体系建设的3点建议
  9. 苹果设备plist编辑器plist editor Pro V2.1绿色版
  10. lammps教程：如何更清晰观察晶体结构？Ovito渲染技巧介绍
  11. 京东无货商品强制加入购物车
  12. 微信广告转化统计java,百度推广oCPC微信号复制转化次数统计系统数据接口
  13. 交叉编译wpa_supplicant常见问题总结
  14. 字节跳动扣响搜索扳机
  15. 我的计算机 桌面图标不见了,我的电脑图标没了,我的电脑不见了的解决方法
  16. 不懂数据库的码农不是好程序员！
  17. spring security 整合sso全记录
  18. vrrp协议和master路由器
  19. python 涨停统计_python 轻松实现获取涨跌停数据
  20. Android 深入系统完全讲解（二）音视频理解攻略 PDF

热门文章

  1. 动态规划1--最长公共子序列
  2. Android测试分析3
  3. javascript的变量
  4. vsftp 添加虚拟帐号
  5. sql server left join 重复数据原因图
  6. 论文笔记 《Maxout Networks》 《Network In Network》
  7. 【Python学习系列三】Windows下Python第三方常用库安装
  8. (转载)机器学习知识点(二十九)LDA入门级学习笔记
  9. 触发器——创建||更新||删除||查看
  10. Java的知识点25——程序、进程与线程 || 线程的创建和启动