Go教程

Django ajax

本文主要是介绍Django ajax，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Django与ajax

1 概念
	AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。
    即使用Javascript语言与服务器进行异步交互，传输的数据为XML
    （当然，传输的数据不只是XML,现在更多使用json数据）
    
2 异步：请求发出去，不会卡在这，可以干其他事

3 局部刷新：js的dom操作，使页面局部刷新

4 基本上web页面都有很多ajax请求


使用原生js写ajax请求比较麻烦而且区分浏览器，需要做浏览器兼容
现在主流做法是用jquery、axios中封装好了的ajax

ajax跟后端

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-3.3.1.js"></script>
</head>
<body>

<input type="text" id="a1"> + <input type="text" id="a2">=<input type="text" id="sum">
<button id="btn_submit">计算</button>
</body>
<script>

    $('#btn_submit').click(function () {
        var a1 = $('#a1').val()
        var a2 = $('#a2').val()
        // 发送ajax请求，计算，返回结果
        $.ajax({
            url: '/sum/',  //ajax请求的地址
            method: 'get',//请求方式
            data: {'a1': a1, 'a2': a2}, //携带参数
            success:function (data) {   //服务端成功返回会回调，执行匿名函数
                console.log(data)
                $('#sum').val(data)
                //location.href='http://www.baidu.com'	前端重定向
            }
        })

    })

</script>
</html>

后端

    def ajax_test(request):
        return render(request,'ajax_test.html')


def sum(request):
    import time
    time.sleep(2)
    a1=int(request.GET.get('a1'))
    a2=int(request.GET.get('a2'))
    return HttpResponse(a1+a2)

ajax发送其他请求的注意事项

1:
	-如果在form表单中，写button和input是submit类型，会触发form表单的提交
    -如果不想触发：
    	-不写在form表单中
        -使用input，类型是button
        
2:
	-后端响应格式如果是：html/text格式，ajax接收到数据后需要自己转成对象
    -后端响应格式是：json，ajax接收到数据后会自动转成对象
    -总结：后端返回数据，统一都用JsonResponse、
    
3:
	-如果使用了ajax，后端就不要返回rediret，render，HttpResponse
    -直接返回JsonResponse

上传文件

1 http --post--请求，有编码格式，主流有三种
	-urlencoded		# 默认的----》从request.POST取提交的数据
    -form-data		# 上传文件的----》从request.POST取提交的数据，request.FILES中取文件
    -json			# ajax发送json格式数据-----》request.POST取不出数据了
    
2 使用ajax和form表单，默认都是urlencoded格式

3 如果上传文件：form表单指定格式,ajax要使用Formdata对象

4 如果编码方式是urlencoded格式，放到body体中数据格式如下
	username=lqz&password=123
    
5 如果是formdata编码格式，body体中是：两部分，数据和文件
	
6 如果是json格式，body体中的格式是：就是json格式字符串
	-注意：注意：注意：如果这种格式，request.POST取不到值了

form表单上传文件

<h1>form表单上传文件</h1>
<form action="" method="post" enctype="multipart/form-data">
    <p>用户名：<input type="text" name="name"></p>
    <p>文件：<input type="file" name="myfile"></p>
    <input type="submit" value="提交">
</form>

ajax 上传文件

前端
<h1>ajax上传文件</h1>
<p>用户名：<input type="text" id="id_name"></p>
<p>文件：<input type="file" id="id_myfile"></p>
<button id="id_btn">提交</button>

<script>
    $('#id_btn').click(function () {
        //如果要上传文件，需要借助于一个js的FormData对象

        var formdata = new FormData() //实例化得到一个FormData对象
        formdata.append('name', $('#id_name').val()) //追加了一个name对应填入的值
        
        //能追加文件
        var file = $('#id_myfile')[0].files[0]	//获取文件内容
        formdata.append('myfile', file)
        
        $.ajax({
            url: 'file_upload',
            method: 'post',
            //上传文件，一定要注意如下两行
            processData: false,  //不预处理数据，
            contentType: false,  //不指定编码格式，使用formdata对象的默认编码就是formdata格式
            data: formdata,
            success: function (data) {
                console.log(data)
            }
        })
    })
</script>

ajax 上传文件

后端
# 路由
url(r'^file_upload/', views.file_upload)

# 视图
def file_upload(request):
    if request.method=='GET':
        return render(request,'file_upload.html')
    else:
        name=request.POST.get('name')
        myfile=request.FILES.get('myfile')
        print(type(myfile)) # 查看类型
        from django.core.files.uploadedfile import InMemoryUploadedFile
        with open(myfile.name,'wb') as f:
            for line in myfile:
                f.write(line)

        return HttpResponse('上传成功')

ajax上传json格式

前端

<h1>ajax提交json格式</h1>
<p>用户名: <input type="text" id="id_name"></p>
<p>密码: <input type="password" id="id_password"></p>
<button id="id_button">提交</button>
</body>

<script>
    $('#id_button').click(function () {
        $.ajax({
            url: '/ajax_json/',
            method: 'post',
            contentType: 'application/json',  //指定编码格式
            data: JSON.stringify(
                				 {name:$('#id_name').val(),
                                 password:$('#id_password').val()}
            					), //json格式字符串
            success: function (data) {
                console.log(data)
            }
        })

    })
</script>
</html>

后端

def ajax_json(request):
    if request.method=='GET':
        return render(request,'ajax_json.html')
    else:
        # json格式，从POST中取不出来
        # name=request.POST.get('name')
        # print(type(request.POST))
        # print(name)
        
        # 在body体中，b格式
        request.data=json.loads(request.body)
        name=request.data.get('name')
        password=request.data.get('password')
        print(name)
        print(password)
        return HttpResponse('ok')
这篇关于Django ajax的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航