用户注册时利用ajax来查重,ajax

一、多对多的三种创建方式

1、三种方式

1、全自动(较为常用)

2、纯手动(了解)

3、半自动(推荐使用)

2、优缺点比较

1、全自动:

优点:第三张表自动帮你创建

缺点:第三张表无法扩展额外的字段

2、纯手动:

优点:第三张表可以扩展额外的字段

缺点:orm查询的时候会带来不便

3、半自动:

优点:第三张表可以扩展任意的额外字段 还可以利用orm 的正反向查询

缺点:无法利用 add set remove clear方法,但是虽然你无法使用 你还可以自己直接操作第三张表,所以推荐使用半自动

3、简易代码演示

# 全自动

class Book(models.Model):

title = models.CharField(max_length=32)

authors = models.ManyToManyField(to='Author') # 第三方表orm帮我们创建

class Author(models.Model):

name = models.CharField(max_length=32)

# 纯手动

class Book(models.Model):

title = models.ManyToManyField(max_length=32)

class Author(models.Model):

name = models.CharField(max_length=32)

class Book2Author(models.Model):

book = models.ForeignKey(to='Book') # 书的外键字段,注意此时后面不用加_id因为django的orm会自动添加

author = models.ForeignKey(to='Author') # 作者表的外键字段,注意此时后面不用加_id因为django的orm会自动添加

create_time = models.DateField(auto_now_add=True)

# 半自动

class Book(models.Model):

title = models.ManyToManyField(max_length=32)

authors = models.ManyToManyField(to='Author', through='Book2Author', through_fields=('book', 'author'))

# 注意:多对多外键字段创在哪一方都可以,上面的这句话的意思是,告诉orm第三张表你不用帮我创了,我已经创好了through='Book2Author',告诉他我的第三张表是哪一个,

# through_fields=('book', 'author')是告诉orm我的哪两个字段是外键字段,然后你去给我绑定关系即可,因为字段可能有多个

class Author(models.Model):

name = models.CharField(max_length=32)

books = models.ManyToManyField(to='Book', through='Book2Author', through_fields=('author', 'book')) # 这是外键字段绑在作者表上的写法,

# 总结:在那张下面绑定,through_fields=()中第一个参数就写那张表

class Book2Author(models.Model):

book = models.ForeignKey(to='Book') # 书的外键字段,注意此时后面不用加_id因为django的orm会自动添加

author = models.ForeignKey(to='Author') # 作者表的外键字段,注意此时后面不用加_id因为django的orm会自动添加

create_time = models.DateField(auto_now_add=True)

二、Ajax

1、Ajax特点简单介绍(八个字)

异步提交

同步:任务提交之后原地等待任务返回的结果  从进程表现上来说   就好像是阻塞

异步:任务提交之后不需要原地等地等待返回结果  直接执行下一行代码  从进程表现上来说   非阻塞

局部刷新

2、Ajax简介

AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML)。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。(这一特点给用户的感受是在不知不觉中完成请求和响应过程)

AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。

整个过程中页面没有刷新,只是刷新页面中的局部位置而已!

当请求发出后,浏览器还可以进行其他操作,无需等待服务器的响应!

3、Ajax常见应用场景

搜索引擎根据用户输入的关键字,自动提示检索关键字。

还有一个很重要的应用场景就是注册时候的用户名的查重。

其实这里就使用了AJAX技术!当文件框发生了输入变化时,使用AJAX技术向服务器发送一个请求,然后服务器会把查询到的结果响应给浏览器,最后再把后端返回的结果展示出来。

2f185dcb077ca03f909cd252532f8520.png

整个过程中页面没有刷新,只是局部刷新了;

在请求发出后,浏览器不用等待服务器响应结果就可以进行其他操作;

4、Ajax优缺点

优点:

AJAX使用JavaScript技术向服务器发送异步请求;

AJAX请求无须刷新整个页面;

因为服务器响应内容不再是整个页面,而是页面中的部分内容,所以AJAX性能高;

两个关键点:1.局部刷新,2.异步请求

5、与后端进行交互的方式

1、浏览器窗口输入url    然后回车                           GET

2、a标签href属性填写url    点击                              GET

3、form表单                                                            GET/POST

4、Ajax                     GET/POST

注意: Ajax并不是一门语言  它其实就是基于js写的一个功能模块而已

由于原生的js书写Ajax较为繁琐,所以这里我们直接学jQuery封装好的Ajax模块操作

三、初始Ajax以及Ajax的基本语法结构

1、一个小案列初始Ajax

需求:页面上有三个input框   一个按钮   用户在前面两个框中输入数字   点击按钮保证页面不刷新的情况下,

将数据发送给后端做计算,再将计算好的结果发送给前端展示到第三个input框中。

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

"""day55 URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:

https://docs.djangoproject.com/en/1.11/topics/http/urls/

Examples:

Function views

1. Add an import: from my_app import views

2. Add a URL to urlpatterns: url(r'^$', views.home, name='home')

Class-based views

1. Add an import: from other_app.views import Home

2. Add a URL to urlpatterns: url(r'^$', Home.as_view(), name='home')

Including another URLconf

1. Import the include() function: from django.conf.urls import url, include

2. Add a URL to urlpatterns: url(r'^blog/', include('blog.urls'))

"""

from django.conf.urls import url

from django.contrib import admin

from app01 import views

urlpatterns = [

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

url(r'^index/', views.index),

]

urls.py

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

from django.shortcuts import render, HttpResponse, redirect, reverse

# Create your views here.

def index(request):

if request.method == 'POST': # 因为是post请求所以需要去把配置文件中中间件的第四行注释掉

i1 = request.POST.get('i1')

i2 = request.POST.get('i2')

# 注意现在i1和i2是字符串类型 需要先做类型转换

i3 = int(i1) + int(i2)

return HttpResponse(i3)

return render(request, 'index.html')

Views.py

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

Title

+ =

按钮

{#{* 给按钮添加绑定事件 *}#}

$('#d1').click(function () {

//获取两个框的内容 朝后端提交异步请求

// ajax基本语法

$.ajax({

//1、到底朝那个后端提交数据

url:'', //控制数据的提交路径 也有三种写法跟form表单的action属性一致

//2、指定当前的请求方式

type:'post',

//3、指定提交的数据

data:{'i1':$('#i1').val(), 'i2':$('#i2').val()},

//4、ajax是异步提交 所以需要给一个回调函数来处理返回的结果

success:function (data) {//固定接收一个形参data data就是异步提交的返回结果

{#alert(data)#}

//将异步回调的结果通过DOM操作渲染到第三个input框中

$('#i3').val(data)

}

})

})

index.html

- 演示图

a8306cd62bf66ee951f3dc4c5b084ad2.png

2、ajax基本语法结构

// ajax基本语法

$.ajax({

//1、到底朝那个后端提交数据

url:'', //控制数据的提交路径 也有三种写法跟form表单的action属性一致

//2、指定当前的请求方式

type:'post',

//3、指定提交的数据

data:{'i1':$('#i1').val(), 'i2':$('#i2').val()},

//4、ajax是异步提交 所以需要给一个回调函数来处理返回的结果

success:function (data) {//固定接收一个形参data data就是异步提交的返回结果

{#alert(data)#}

//将异步回调的结果通过DOM操作渲染到第三个input框中

$('#i3').val(data)

}

})

四、content-Type前后端传输数据的编码格式

1、提交数据的三种编码 格式

urlencoded

formdata

application/json

2、演示form与ajax的content-Type参数

a、form 表单

1、默认是以urlencoded编码格式传输数据

b18d0622f487f8c6b10d7cee8dae22cd.png

2、urlencoded的数据格式

xxx=xxx&yyy=yyy

django 后端针对该格式的数据,会自动解析帮你打包到request.POST中

4ec64efe609ea812e1ead20dd66384a8.png

4b0dc48c345cbe730bef0aca5e55ea9b.png

3、formdata数据格式

django后端针对符合urlencoded编码格式(普通键值对)的数据还是统一解析到request.POST中

而针对formdata文件数据就会自动解析放到request.FILES中

f4e4c3bba36a01fde11c98c6a6f3a62f.png

93ee84220281f6803eec5522caa8b631.png

3a9a0c13735dda223937271660c37413.png

b、ajax提交

1、ajax默认的也是urlencoded编码格式

e0d723fe62a974d4c3c5476389992d52.png

2、ajax也可以发送json(这个form表单发送不了)

注意:前后端数据交互  编码格式与数据格式一定要一致 ,不可以骗人家!!!明明你要发送的是json格式的数据,你跟我吼一声说你要发送列表了。

application/json

django后端针对json格式的数据,并不会做任何的处理,而是直接放到request.body中, 我们也需要掌握ajax发json格式的基本结构代码

$.ajax({

url:'',

type:'post',

//修改content-Type参数

contentType:'application/json',

data:JSON.stringify({'username':'yafeng', 'password': 123}),//将数据序列化成json格式数据

success:function (data) {

alert(data)

}

})

5760dc44bebe6e30616c692b83f0f1ac.png

32117682b43fcf6a45576a70fb3b71ec.png

07e33465fbe37c4741272ab415f643b0.png

e1f4ecfc8faf9109c8e4ba13dcfe835e.png

21268cc6bac4672644c54c65c8c5a569.png

3、ajax发送文件

借助于内置对象FormData

ajax发送文件的基本语法结构

既发普通键值对也发文件

// ajax发送文件数据 需要借助于内置对象

$('#d3').click(function () {

// 1 需要先生成一个内置对象

var myFormData = new FormData();

// 2 传普通键值对 当普通键值对较多的时候 我们可以利用for循环来添加

myFormData.append('username','jason');

myFormData.append('password',123);

// 3 传文件

myFormData.append('myfile',$('#i1')[0].files[0]); // 获取input框内部用户上传的文件对象

// 发送ajax请求

$.ajax({

url:'',

type:'post',

data:myFormData,

// 发送formdata对象需要指定两个关键性的参数

processData:false, // 让浏览器不要对你的数据进行任何的操作

contentType:false, // 不要使用任何编码格式 对象formdata自带编码格式并且django能够识别该对象

success:function (data) {

alert(data)

}

})

})

b28aed0d2ac6d8c5f4bfbc47906a005d.png

- 代码演示

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

"""day55 URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:

https://docs.djangoproject.com/en/1.11/topics/http/urls/

Examples:

Function views

1. Add an import: from my_app import views

2. Add a URL to urlpatterns: url(r'^$', views.home, name='home')

Class-based views

1. Add an import: from other_app.views import Home

2. Add a URL to urlpatterns: url(r'^$', Home.as_view(), name='home')

Including another URLconf

1. Import the include() function: from django.conf.urls import url, include

2. Add a URL to urlpatterns: url(r'^blog/', include('blog.urls'))

"""

from django.conf.urls import url

from django.contrib import admin

from app01 import views

urlpatterns = [

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

url(r'^index/', views.index),

url(r'^ab_ct/', views.ab_ct),

]

urls.py

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

from django.shortcuts import render, HttpResponse, redirect, reverse

# Create your views here.

def index(request):

if request.method == 'POST': # 因为是post请求所以需要去把配置文件中中间件的第四行注释掉

i1 = request.POST.get('i1')

i2 = request.POST.get('i2')

# 注意现在i1和i2是字符串类型 需要先做类型转换

i3 = int(i1) + int(i2)

return HttpResponse(i3)

return render(request, 'index.html')

import json

def ab_ct(request):

if request.method == 'POST':

# print(request.POST)

# print(request.FILES)

# print(request.body)

# 自己处理json格式的数据

# json_bytes = request.body

# 先把二进制数据解码

# json_str = json_bytes.decode('utf-8')

# 再反序列化

# json_dict = json.loads(json_str) # 注:json.loads可以自动帮你解码,所以上面一步可以简写

# json_dict = json.loads(json_bytes) # 注:json.loads可以自动帮你解码,所以上面一步可以简写

# print(json_dict, type(json_dict))

print(request.POST)

print(request.FILES)

return render(request, 'ab_ct.html')

Views.py

8f900a89c6347c561fdf2122f13be562.png

961ddebeb323a10fe0623af514929fc1.png

Title

{#

#}

{# #}

{# #}

{# #}

{# #}

{#

#}

点击发送ajax请求

ajax发送json数据格式

ajax发送文件数据

/*ajax 默认格式

$('#d1').click(function () {

$.ajax({

url:'',

type:'post',

data:{'username': 'yafeng', 'password': 123},

success:function (data) {

alert(data)

}

})

})

*/

//发json格式数据

/*

$('#d2').on('click', function () {

$.ajax({

url:'',

type:'post',

//修改content-Type参数

contentType:'application/json',

data:JSON.stringify({'username':'yafeng', 'password': 123}),//将数据序列化成json格式数据

success:function (data) {

alert(data)

}

})

})

*/

// ajax发送文件数据需要借助于 内置对象FormData

$('#d3').click(function () {

//1、需要先生成一个内置对象

var myFormDate = new FormData();

//2、传普通键值对

myFormDate.append('username','yafeng');

myFormDate.append('password', 123);

//3、传文件

myFormDate.append('myfile', $('#i1')[0].files[0]) //先变成原生json对象 再获取input框内部用户上传的文件对象

//4、发送ajax请求

$.ajax({

url:'',

type:'post',

data:myFormDate,

//发送formdata对象需要指定两个关键字的参数

processData:false,// 让浏览器不要对你的数据进行任何的操作

contentType:false,// 不要使用任何编码格式 对象formdata自带编码格式并且django能够识别该对象

success:function (data) {

alert(data)

}

})

})

ab_ct.html

标签:url,request,json,models,ajax,data

来源: https://www.cnblogs.com/yafeng666/p/12181567.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值