Ajax实现django前后端数据交互

最新推荐文章于 2024-04-20 11:29:21 发布

无所期必满载而归

最新推荐文章于 2024-04-20 11:29:21 发布

阅读量3.2k

点赞数 3

文章标签： django ajax 前后端分离后端必学知识

本文链接：https://blog.csdn.net/weixin_43927582/article/details/98943682

版权

Ajax实现前后端数据交互

前提:

熟悉django

了解HTML

了解JQ基础语法

Ajax是什么?

Ajax 即Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript和 XML 或者是 HTML（标准通用标记语言的子集）。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面.

(来自百度百科)

相对于后端人员我们需要理解的就是:

他是一个jq,可以实现局部刷新,主要用来实现客户端与服务器端的异步通信效果就可以了

Ajax优缺点:

优点:

无刷新技术(不可能为了辨别某一个界面就一直刷新界面,这样用户体验特别差)
前后端分离(再也不存在前端人员等后端人员的事情了)
无需任何插件(只需要在浏览器中默认允许执行JQ即可)

缺点:

无法将状态加入收藏或书签的问题(导致无法后退,用户觉得莫名其妙…)
用户发出请求到服务器发出响应之间的间隔如果略长会让用户体验极差!

Ajax过程:

-  创建XMLHttpRequest对象,也就是创建一个异步调用对象
-  创建一个新的HTTP请求,并指定其请求的方法、URL及验证信息
-  设置响应 HTTP 请求状态变化的函数
-  发送 HTTP 请求
-  获取异步调用返回的数据
-  使用 JavaScript 和 DOM 实现局部刷新

使用前需要注意:

判断是发生在html端并不是django进行判断

双方数据交互使用的是使用JSON数据

AJax判断写在JQ内

Ajax实例:

1.写一个简单的django来实现前后端数据传输

# first views

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


def index(request):

    return render(request, 'index.html')


def check(request):

    uname = request.GET['uname']

    #admin表示不可用
	
	#我们为了方便,直接判断某个值即可,之后数据库交互即可
    if uname == '赵泽栋大帅比':
        return HttpResponse(json.dumps({'result':'False'}))

    else
        return HttpResponse(json.dumps({'result': 'True'}))

# first urls

from django.urls import path,include
from . import views

app_name = 'first'

urlpatterns = [

    path('', views.check)

]

# 主urls

from django.urls import path,include
from first import views

urlpatterns = [

    path('', views.index),
    path('first/', include('first.urls')),

]

# html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>



</head>
    <style type="text/css">
        .red {
            color: red
        }

        .green {
            color: green
        }
    </style>

<body>

<h1>注册信息</h1>
<form action="#" method="post">
    用户名:<input type="text" id="uname"/><span id='uname_msg'></span>
    <br/>
    邮箱:<input type="text" id="email"/>
    <br/>
    <input type="submit" value="注册"/>
</form>


<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>


</body>
</html>

此时查看API接口1实例即可调用!

2.在html中script下添加事件

<script>
    
	$(function(){
        //页面操作
        //1.添加用户名框改变事件
        
        $('uname').change(function(){
            uname = $(this).val();
            alert (uname)
        })
    })

</script>

发生改变弹出提示框这样的话我们之后只需要使用AJAX将数据传输到后端即可完成交互

在这里插入图片描述
ajax提供了传输信息的方式

$.ajax({                          //Ajax的固定写法，在{}里面写你的四兄弟
                url:'/first',                         //不写默认是当前页面提交
                type:'get' ,                 //将请求方式从默认的get改成post
                data:'uname='+uname,                      //这个固定是data,后面放的是字典的形式
                success:function(msg){     //回调函数，拿到的是提交过后的数据，就是后端处理过后的数据,不要忘记参数，这个参数就是接收后端处理过后的数据
                //对接受到的数据进行处理，做的是局部刷新操作
　　　　　　　　　　alert(msg)

                }
            })

尝试一下查看是否会alert信息

之后我们直接将剩余的填充完毕即可

$.ajax({                          //Ajax的固定写法，在{}里面写你的四兄弟
                url:'/first',                         //不写默认是当前页面提交
                type:'get' ,                 //将请求方式从默认的get改成post
                data:'uname='+uname,                      //这个固定是data,后面放的是字典的形式
                success:function(msg){     //回调函数，拿到的是提交过后的数据，就是后端处理过后的数据,不要忘记参数，这个参数就是接收后端处理过后的数据
                //对接受到的数据进行处理，做的是局部刷新操作
{#　　　　　　　　　　alert(msg);#}
                    json = eval("("+msg+")");  //自带方法eval可以将字符串转换为json格式			//进行判断
                    if (json.result =='False'){ 
                        $('#uname_msg').html('名字已被注册请重新尝试')

                    }else{
                         $('#uname_msg').html('名字可用')
                    }

                }
            })

在这里插入图片描述

遇到问题:

使用post请求会报错:

解决办法如下：

首先，在views.py里导入包

from django.views.decorators.csrf import csrf_exempt,csrf_protect

然后，在views.py里定义的函数前面加上@csrf_exempt

1KuNF-1565318122059)]

解决办法如下：

首先，在views.py里导入包

from django.views.decorators.csrf import csrf_exempt,csrf_protect

[外链图片转存中…(img-ZKi0Kczd-1565318122059)]

然后，在views.py里定义的函数前面加上@csrf_exempt

[外链图片转存中…(img-I4TL5oAH-1565318122059)]

转载自:https://www.jianshu.com/p/c6eb5285765b

无所期必满载而归

关注

3
点赞
踩
34

收藏

觉得还不错? 一键收藏
1
评论
Ajax实现django前后端数据交互

Ajax实现前后端数据交互前提: 熟悉django 了解HTML 了解JQ基础语法Ajax是什么? Ajax 即Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 Ajax = 异步 JavaScript和 XML 或者是 HTML（标准通用标记语言的子集）。 Ajax ...
复制链接

扫一扫