Django-Ajax、form组件

1.Ajax

1.AJAX:不是新的编程语言,而是一种使用现有标准的新方法,我们目前学习的是jQuery版本。特点:异步提交,局部刷新。

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

3.基本语法

	$.ajax({

        url:'',  // 后端地址 三种填写方式 与form标签的action一致

        type:'post',  // 请求方式 默认也是get

        data:{'v1':v1Val, 'v2':v2Val},  // 发送的数据

        success:function (args) {  // 后端返回结果之后自动触发 args接收后端返回的数据

         	 $('#d3').val(args)

                                }

    })

"""

作业:设置一个注册小程序,用户名不能为jason并且密码不能为123或123456,不能用户点击提交就应该显示:

思路:jQuery事件,ajax事件

register.html:

<body>

    <form action="" method="post">

        <p>username:

            <input type="text" id="i1" name="username">

            <span id="s1" style="color: red"></span>

        </p>

        <p>password:

            <input type="text" id="i2" name="password">

            <span id="s2" style="color: red"></span>

        </p>

        <input type="submit" id="i3">

    </form>

    <script>

        $('#i1').blur(function () {

            $.ajax({

                url:'',

                type:'post',

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

                success:function (args) {

                    $('#s1').text(args)

                }

            })

        })

        $('#i2').blur(function () {

            $.ajax({

                url:'',

                type: 'post',

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

                success:function (args) {

                    $('#s2').text(args)

                }

            })

        })

    </script>

</body>

views.py:

def register(request):

    if request.method == 'POST':

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

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

        if username:

            if username == 'jason':

                return HttpResponse('用户名不能为jason')

            else:

                return HttpResponse('')

        if password:

            if password == '123' or password == '123456':

                return HttpResponse('密码过于简单,请重新输入')

            else:

                return HttpResponse('')

    return render(request, 'register.html')

urls.py:

urlpatterns = [

    path('register/',views.register)

]

作业2:在前端编写三个输入框,前两个输入框让用户输入数字,点击按钮之后第三个输入框自动返回两数之和:

views.py:

def index(request):

    if request.method == 'POST':

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

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

        i3 = int(i1) + int(i2)

        return HttpResponse(i3)

    return render(request,'index.html')

index.html:

<body>

    <input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3">

    <input type="submit" value="点我发送ajax请求" id="sub">

    <script>

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

            $.ajax({

                url:'',

                type:'post',

                data:{

                    'i1':$('#i1').val(),

                    'i2':$('#i2').val()

                },

                success:function (args) {

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

                }

            })

        })

    </script>

</body>

作业3:编写一个可以实时校验用户名的输入框,如果用户名为jason,用户色自提提示。 不能点击或者失焦才实现:

# input实时监听事件,ajax时间

register.html:

<body>

    <p>username:

        <input type="text" name="username" id="username">

        <span style="color: red" id="s1"></span>

    </p>

    <p>password:

        <input type="password" name="password" id="password">

        <span style="color: red" ></span>

    </p>

    <script>

        $('#username').on('input',function () {

            $.ajax({

                url:'',

                type:'post',

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

                success:function (args) {

                    $('#s1').text(args)

                }

            })

        })

    </script>

</body>

views.py:

def register(request):

    if request.method == 'POST':

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

        if username:

            if username == 'jason':

                return HttpResponse('用户名不能为jason')

            else:

                return HttpResponse('')

        return HttpResponse('')

    return render(request,'register.html')

"""

2.Content-Type

1.urlencoded

	ajax默认的编码格式、form表单默认也是

	数据格式  xxx=yyy&uuu=ooo&aaa=kkk

 	django后端会自动处理到request.POST中,用request.POST.get('xxx')拿到值

2.formdata

	django后端针对普通的键值对还是处理到request.POST中 但是针对文件会处理到request.FILES中。

"""

系统会根据不同的content-Type来分辨有几种文件类型,需要几个request。

"""

3.application/json:发送json格式数据类型

	form表单不支持 ajax可以

	<script>

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

        $.ajax({

            url:'',

            type:'post',

            data:JSON.stringify({'name':'jason','age':18}),  // 千万不要骗人家

            contentType:'application/json',  //要指定contentType

            success:function (args) {

                alert(args)

            }

        })

    })

</script>

	后端需要从request.body中获取并自己处理

"""

views.py:

import json

def jsonfunc(request):

    if request.method == 'POST':

        data = request.body  # b'{"name":"max","age":25}'

        userdict = json.loads(data)  # loads自带将二进制转为十进制功能

        print(userdict)  # {'name': 'max', 'age': 25}

        return HttpResponse('成功成功')

    return render(request,'jsonfunc.html')

jsonfunc.html:

<body>

    <button id="b1">点我用ajax发送json数据</button>

    <script>

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

            $.ajax({

                url:'',

                type:'post',

                data:JSON.stringify({'name':'max','age':25}),

                contentType:'application/json',

                success:function (args) {

                    alert(args)

                }

            })

        })

    </script>

</body>

"""

3.ajax携带文件数据

<script>

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

        // 1.先产生一个FormData对象

        let myFormDataObj = new FormData();

        // 2.往该对象中添加普通数据

        myFormDataObj.append('name', 'jason');

        myFormDataObj.append('age', 18);

        // 3.往该对象中添加文件数据

        myFormDataObj.append('file', $('#d2')[0].files[0])

        // 4.发送ajax请求

        $.ajax({

            url:'',

            type:'post',

            data:myFormDataObj,

            // ajax发送文件固定的两个配置

            contentType:false,

            processData:false,

            success:function (args){

                alert(args)

            }

        })

    })

</script>

"""

getfile.html:

<body>

    <input type="file" id="i1">

    <input value="通过ajax发送文件" id="i2">

    <script>

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

            let myFormDataObj = new FormData();

            myFormDataObj.append('name','max');

            myFormDataObj.append('age',18);

            myFormDataObj.append('file',$('#i1')[0].files[0])

            $.ajax({

                url:'',

                type:'post',

                data:myFormDataObj,

                contentType:false,

                processData:false,

                success:function (args) {

                    alert(args)

                }

            })

        })

    </script>

</body>

views.py:

def getfile(request):

    if request.method == 'POST':

        print(request.POST)  # <QueryDict: {'name': ['max'], 'age': ['18']}>

        print(request.FILES)  # <MultiValueDict: {'file': [<TemporaryUploadedFile: Capture001.png (image/png)>]}>

        return HttpResponse('成功')

    return render(request,'getfile.html')

"""

4.ajax补充说明

1.后端print(request.isajax)可以判断当前请求是否由ajax发出。

2.后端返回的三板斧都会被args接收不再影响整个浏览器页面:

返回一个页面被args接收,同理,返回字典根本就不会被接收:

3.选择使用ajax做前后端交互时,后端一般返回的都是json格式的字典数据,当我们从前端打印出来时发现它是一个字符类型,这也就意味着它不能通过点的方式取值:

views.py:

def ajax1(request):

    if request.is_ajax():

        userdict = {'code':10000 ,'name':'max', 'age':25}

        import json

        user_data = json.dumps(userdict)

        return HttpResponse(user_data)

    return render(request,'ajax1.html')

ajax1.html:

<body>

    <button id="d1">发送ajax请求</button>

    <script>

        $('#d1').click(function () {  # 点击一次就发送一个ajax请求

            $.ajax({

                url: '',

                type: 'post',

                data: {'name':'max'},

                success:function (args) {

                    console.log(args)

                    console.log(typeof args)

                }

            })

        })

    </script>

</body>

我们可以在$.ajax的字典中增加一个键值对:dataType:'json',这样前端就可以自动将字符串反序列化称为自定义对象。

views.py:

def ajax1(request):

    if request.is_ajax():

        userdict = {'code':10000 ,'name':'max', 'age':25}

        import json

        userdata = json.dumps(userdict)

        return HttpResponse(userdata)

    return render(request,'ajax1.html')

ajax1.html:

<body>

    <button id="d1">发送ajax请求</button>

    <script>

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

            $.ajax({

                url: '',

                type: 'post',

                data: {'name':'max'},

                dataType:'json',

                success:function (args) {

                    console.log(args)

                    console.log(typeof args)

                    console.log(args.name)

                }

            })

        })

    </script>

</body>

4.此外还有一种方式:我们在后端用JsonResponse模块发送字典,在前端本身就是一个自定义对象,可以直接通过点的方式取值。

views.py:

def ajax1(request):

    if request.is_ajax():

        userdict = {'code':10000 ,'name':'max', 'age':25}

        from django.http import JsonResponse

        return JsonResponse(userdict)

    return render(request,'ajax1.html')

ajax1.html:

<body>

    <button id="d1">发送ajax请求</button>

    <script>

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

            $.ajax({

                url: '',

                type: 'post',

                data: {'name':'max'},

                success:function (args) {

                    console.log(args)

                    console.log(typeof args)

                    console.log(args.name)

                }

            })

        })

    </script>

</body>

5.多对多三种创建方式

1.全自动创建(需要创建外键字段,系统会根据外键自动创建第三张表):

class Book(models,Model):

	title = models.CharField(max_length=32)

	authors = models.ManyToManyField(to='Author')  

class Author(models.Model):

	name = models.CharField(max_length=32)

'''

优势:自动创建第三张表,并且提供了add,remove,set,clear四种操作发方法。

劣势:字段固定,没办法扩展更多的字段

'''

2.纯手动创建(不需要创建外键,第三张表自己创建,可以扩展更多字段):

	 class Book(models.Model):

        title = models.CharField(max_length=32)

    class Author(models.Model):

        name = models.CharField(max_length=32)

    class Book2Author(models.Model):

        book = models.ForeignKey(to='Book')

        author = models.ForeignKey(to='Author')

        others = models.CharField(max_length=32)

        join_time = models.DateField(auto_now_add=True)

 	 优势:第三张表完全由自己创建 扩展性强

	 劣势:编写繁琐 并且不再支持add、remove、set、clear以及正反向概念

'''没有外键,意味着第三幢表的关系需要自己添加,并且不好判断是正向还是反向查询'''

3.半自动创建():

	 class Book(models.Model):

        title = models.CharField(max_length=32)

        authors = models.ManyToManyField(to='Author',

                          through='Book2Author',      									through_fields=('book','author')

                                        )

    class Author(models.Model):

        name = models.CharField(max_length=32)

    class Book2Author(models.Model):

        book = models.ForeignKey(to='Book', on_delete=models.CASCADE)

        author = models.ForeignKey(to='Author', on_delete=models.CASCADE)

        others = models.CharField(max_length=32)

        join_time = models.DateField(auto_now_add=True)

优势:第三张表完全由自己创建,扩展性强 正反向概念依然清晰可用

劣势:编写繁琐不再支持add、remove、set、clear

6.django自带的序列化组件

1.前后端分离的项目,只需要返回json格式的数据即可。

将所有的书籍信息放在一个大字典内,然后返回给前端:

def ajax2(request):

    book_queryset = models.Book.objects.all()

    data_dict = {}

    for book_obj in book_queryset:

        tem_dict = {}

        tem_dict['pk'] = book_obj.pk

        tem_dict['title'] = book_obj.title

        tem_dict['price'] = book_obj.price

        tem_dict['info'] = book_obj.info

        data_dict[book_obj.pk] = tem_dict

    return JsonResponse(data_dict, json_dumps_params={'ensure_ascii':False})

2.上述结果我们可以直接用序列化组件serializers实现,serializers可以直接将queryset转成json格式发给前端并且前端还拥有自定义对象的特性。

def ajax2(request):

    book_queryset = models.Book.objects.all()

    from django.core import serializers

    res = serializers.serialize('json', book_queryset)

    return HttpResponse(res)

"""

但是拿到的结果是编码过后的结果,需要在BEJSON中查看解码之后的结果

"""

7.批量操作数据

1.如果想在一张表中插入100000条数据,我们的思路如下:

views.py:

def ajax4(request):

	for i in range(1,10000)

    models.Book.objects.create(title='第%s本书'%i,info='很带劲',price=888.88)

	 book_queryset = models.Book.objects.all()

    return render(request,'ajax4.html',locals())

html.py:

<body>

    <p>

    {% for book_obj in book_queryset %}

        {{ book_obj.title }}

    {% endfor %}

    </p>

</body>

2.如果添加的数据很多,并且数据之间有规律,我们可以采用bulk_create插入:

views.py:

def ajax5(request):

    book_obj_list = []  # 1.首先生成一个空列表

    for i in range(100000):

        book_obj = models.Users(name='max',country='china')

        book_obj_list.append(book_obj)  # 2.生成100000个空对象并且添加到列表中

    models.Users.objects.bulk_create(book_obj_list)  # 3.直接将列表当做参数传入表中

    return HttpResponse('数据传输中...')

8.自定义分页器模块

"""

分页器代码流程推导参考:

https://www.cnblogs.com/Dominic-Ji/articles/12035722.html

"""

自定义分页器代码封装:

1.在应用下新建一个目录utils,在该目录下新建一个py文件,命名为:myPage.py:

class Pagination(object):

    def __init__(self, current_page, all_count, per_page_num=2, pager_count=11):

        """

        封装分页相关数据

        :param current_page: 当前页

        :param all_count:    数据库中的数据总条数

        :param per_page_num: 每页显示的数据条数

        :param pager_count:  最多显示的页码个数

        """

        try:

            current_page = int(current_page)

        except Exception as e:

            current_page = 1

        if current_page < 1:

            current_page = 1

        self.current_page = current_page

        self.all_count = all_count

        self.per_page_num = per_page_num

        # 总页码

        all_pager, tmp = divmod(all_count, per_page_num)

        if tmp:

            all_pager += 1

        self.all_pager = all_pager

        self.pager_count = pager_count

        self.pager_count_half = int((pager_count - 1) / 2)

    @property

    def start(self):

        return (self.current_page - 1) * self.per_page_num

    @property

    def end(self):

        return self.current_page * self.per_page_num

    def page_html(self):

        # 如果总页码 < 11个：

        if self.all_pager <= self.pager_count:

            pager_start = 1

            pager_end = self.all_pager + 1

        # 总页码  > 11

        else:

            # 当前页如果<=页面上最多显示11/2个页码

            if self.current_page <= self.pager_count_half:

                pager_start = 1

                pager_end = self.pager_count + 1

            # 当前页大于5

            else:

                # 页码翻到最后

                if (self.current_page + self.pager_count_half) > self.all_pager:

                    pager_end = self.all_pager + 1

                    pager_start = self.all_pager - self.pager_count + 1

                else:

                    pager_start = self.current_page - self.pager_count_half

                    pager_end = self.current_page + self.pager_count_half + 1

        page_html_list = []

        # 添加前面的nav和ul标签

        page_html_list.append('''

                    <nav aria-label='Page navigation>'

                    <ul class='pagination'>

                ''')

        first_page = '<li><a href="?page=%s">首页</a></li>' % (1)

        page_html_list.append(first_page)

        if self.current_page <= 1:

            prev_page = '<li class="disabled"><a href="#">上一页</a></li>'

        else:

            prev_page = '<li><a href="?page=%s">上一页</a></li>' % (self.current_page - 1,)

        page_html_list.append(prev_page)

        for i in range(pager_start, pager_end):

            if i == self.current_page:

                temp = '<li class="active"><a href="?page=%s">%s</a></li>' % (i, i,)

            else:

                temp = '<li><a href="?page=%s">%s</a></li>' % (i, i,)

            page_html_list.append(temp)

        if self.current_page >= self.all_pager:

            next_page = '<li class="disabled"><a href="#">下一页</a></li>'

        else:

            next_page = '<li><a href="?page=%s">下一页</a></li>' % (self.current_page + 1,)

        page_html_list.append(next_page)

        last_page = '<li><a href="?page=%s">尾页</a></li>' % (self.all_pager,)

        page_html_list.append(last_page)

        # 尾部添加标签

        page_html_list.append('''

                                           </nav>

                                           </ul>

                                       ''')

        return ''.join(page_html_list)

2.views.py:

def page(request):

    friend_queryset = models.Friend.objects.all()

    from app01.utils.myPage import Pagination

    current_page = request.GET.get('page')

    '''可以在这里设置每页展业数据条数,页数'''

    page_obj = Pagination(current_page=current_page,all_count=friend_queryset.count(),per_page_num=20,pager_count=7)

    page_queryset = friend_queryset[page_obj.start:page_obj.end]

    return render(request,'page.html',locals())

page.html:

	{% for friend_obj in page_queryset %}

		<p style="text-align: center">{{ friend_obj.name }}</p>

	{% endfor %}

	<div class="text-center">{{ page_obj.page_html|safe }}</div>

</body>

巴特西

Django-Ajax、form组件

1.Ajax

2.Content-Type

3.ajax携带文件数据

4.ajax补充说明

5.多对多三种创建方式

6.django自带的序列化组件

7.批量操作数据

8.自定义分页器模块

最新文章

热门文章