创建项目 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# /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# /en/1.11/topics/i18n/LANGUAGE_CODE = 'zh-Hans'#'en-us'TIME_ZONE = 'Asia/Shanghai'#'UTC'........# Static files (CSS, JavaScript, Images)# /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 pymysqlpymysql.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
