js与python前后端通信_python的前后端分离（一）：django+原生js实现get请求

一、django新建项目和应用

1、创建项目

django-admin startproject dj_e

2、数据库配置

DATABASES = {

'default': {

'ENGINE': 'django.db.backends.mysql', #数据库引擎

'NAME': 'dj_e_db', #数据库名

'USER': 'root', #账户名

'PASSWORD': 'password', #密码

'HOST': 'localhost', #主机

'PORT': '3306', #端口

}

}

3、在_init_.py添加如下代码

import pymysql

pymysql.install_as_MySQLdb()

4、数据库迁移命令

python manage.py makemigrations

python manage.py migrate

5、创建应用，编写views

ajax与get的后台接口

创建应用register(在这个应用实现get)：

python manage.py startapp register

6、在views.py下创建接口，我们先举个简单的例子——hello接口

from django.shortcuts import render, render_to_response

from django.http import JsonResponse

# Create your views here.

def hello(request):

return JsonResponse({'result': 200, 'msg': '连接成功'})

7、register目录中新建一个urls.py文件，输入以下代码

from django.conf.urls import url

from . import views

urlpatterns = [

url(r'^helloApi$', views.hello, name='hello'),

url(r'^registerPage$', views.registerPage, name='registerPage'),

]

8、在dj_e/urls.py中修改

from django.conf.urls import include, url

from django.contrib import admin

urlpatterns = [

url(r'^admin/', include(admin.site.urls)),

url(r'^', include('register.urls')),

url(r'^register/', include("register.urls")),

]

9、最后打开django的开发服务器，测试一下接口

python manage.py runserver

二、原生js实现异步的get请求

1、进行前后端的分离(ajax的get请求异步)

在根目录创建一个html文件夹，并在里面创建register.html

function ajaxResponse(xhr, successFunction, falseFunction) {

xhr.onreadystatechange = function () {

if (xhr.readyState === 4) {

console.log(xhr.status);

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {

alert("成功");

successFunction();

} else {

alert("失败" + xhr.status);

falseFunction();

}

}

}

}

getApiDiv = document.querySelector('#getHelloApiDiv');

xhr = new XMLHttpRequest();

{# getApiDiv.onclick = function () {#}

window.onload = function () {

ajaxResponse(

xhr,

function () {

helloText = JSON.parse(xhr.responseText);

getApiDiv.innerText = helloText.msg;

}, function () {

}

);

xhr.open('get', 'http://localhost:8000/register/helloApi'); //接口写在这里

xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=utf-8;');

xhr.send(null);

};

2、在register/views.py中编写一个返回html的接口，代码如下，注意import了render_to_response方法

from django.shortcuts import render, render_to_response

from django.http import JsonResponse

# Create your views here.

def hello(request):

return JsonResponse({'result': 200, 'msg': '连接成功'})

def registerPage(request):

return render_to_response("register.html")

三、解决一些问题

1、django的相关配置

# 注册应用和允许跨域

INSTALLED_APPS = (

...

'register',

'corsheaders',

)

# 允许django跨域请求的配置

MIDDLEWARE_CLASSES = (

...

'corsheaders.middleware.CorsMiddleware',

...

)

CORS_ORIGIN_ALLOW_ALL = True

CORS_ALLOW_CREDENTIALS = True

# 设置模板路径

TEMPLATES = [

{

'BACKEND': 'django.template.backends.django.DjangoTemplates',

'DIRS': [os.path.join(BASE_DIR, 'html')],

...

# 数据库配置

DATABASES = {

'default': {

# 'ENGINE': 'django.db.backends.sqlite3',

# 'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),

'ENGINE': 'django.db.backends.mysql', # 数据库引擎

'NAME': 'dj_e_db', # 数据库名

'USER': 'root', # 账户名

'PASSWORD': 'root', # 密码

'HOST': 'localhost', # 主机

'PORT': '3306', # 端口

}

}

# 语言和时区配置

LANGUAGE_CODE = 'zh-Hans'

TIME_ZONE = 'Asia/Shanghai'

2、跨域请求

pip安装django-cors-headers，解决异步跨域被禁言的问题。

需要settings.py 进行配置。

四、效果截图

确定后，