zoukankan      html  css  js  c++  java
  • Django-Ajax使用

    一、ajax简介

    Ajax,(asynchronous JavaScript and XML)全名翻译为:异步的JavaScript 和XML。这里有三个重点,异步,js,xml

    同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
    异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。
    
    # 1 异步 Javascript 和 XML:
    异步: 即异步交互
    javascript:通过javascript来操作,发送请求到服务端
    xml:数据交互使用xml,但现在主流使用json格式
    
    # xml与json对比
    xml: 可阅读性比较高,解析复杂,占的空间大
    < name > lqz < / name >
    < age > 19 < / age >
    
    json: 可阅读性比较高,解析简单,占的空间小
    {"name": "lqz", "age": 19}
    
    浏览器页面局部刷新(js的dom操作,就是利用了ajax技术)
    是一个通过js发送http的请求的技术(因为这些一个目前非常通用且火热是技术,所以各种语言都会有自己对ajax的处理方法)
    

    二、ajax的简单使用

    1.原生js写ajax请求(写起来很复杂,而且需要考虑浏览器版本)
    2.jquery封装好了一个方法ajax,我们直接调用jquery的方法,就可以发送ajax的请求
    3.前后端分离后,还是可以继续使用jquery的ajax,目前axios更主流一些,两者都是ajax技术,本质一样

    # 模板,一般会绑定在一个js事件当中。比如绑定一个按钮的点击事件
        $.ajax({
            url: '/add/', 
          '''
          写地址,要进django的urls匹配,且在这里只能写完整的地址,因为ajax无法重定向,若写/add,django虽然会帮你加上/但是,无法重定向到这个页面,导致报错
          '''
            method: 'post',  # 请求方式,写get,或者json格式都行
            data:{'num1':$("#num1").val() ,'num2':$("#num2").val() },  # 这里构建自己要传的数据格式,这里的key不一定要和标签的对应,但是你这里写什么,后端拿到的key就是什么
            success:function (data) {
                //成功触发执行的代码
              	alert("1");
            },
            error:function (error) {
                //失败触发执行的代码
              	alert("0");
            }
        })
        
    # 编码默认用urlencoded
    # 默认情况下ajax会把{'num1':$("#num1").val() ,'num2':$("#num2").val() }数据转成预处理数据
    # 预处理数据:
    a=20&b=30  # 会把这个放到body体中
    
    注意:(坑:在form表单中写button,input的submit,用jquery,操作button),会发两次请求,因为ajax会发一次,form自己又发一次
    

    利用ajax做简单的加法运算,将我们获取的值,传给后端,计算完成后返回结果。(只是一个例子,这个功能其实前端直接js计算得到结果就行)

    <!-- html代码 -->
    <input type="text" id="first">+<input type="text" id="second">=<input type="text" id="result">
    <button id="btn">点我计算结果</button>
    
    //js代码
    //击button按钮,触发ajax
    $("#btn").click(function () {
        $.ajax({
            url: '/add/',  //向哪个地址发送请求
            method: 'post', //发送什么请求
            //使用jquery,获取输入框内的值
            //向后端传输的数据(没有指定编码,默认使用urlencoded)
            data: {'a': $("#first").val(), 'b': $("#second").val()},
            success: function (data) {
                //数据正常返回,就会触发该匿名函数的执行,返回的数据就会复制给data
                console.log(data)
                //把后端返回的数据,通过dom操作,写到input框中
                $('#result').val(data)
            },
            //请求失败,就会触发error的执行,并且把错误信息给error
            error: function (error) {
                console.log(error)
            }
        })
    })
    

    三、ajax上传文件

    1 http请求,body体中放文件内容,ajax本质就是发送http请求,所以它可以上传文件
    2 两种上传文件的方式,form表单,ajax

    // 模板
    var formdata=new FormData() 
    // 拿文件对象固定格式 $("#id_file")[0].files[0]
    formdata.append('myfile',$("#id_file")[0].files[0])
    // 还可以带数据,继续在后面写就是了
    $.ajax({
            url:'/uploadfile/',
            method: 'post',
            //上传文件必须写这两句话
            processData:false,  // 预处理数据,
            contentType:false,  // 不指定编码,如果不写contentType,默认用urlencoded
      
            data:formdata,      // formdata内部指定了编码,并且自行处理数据
            success:function (data) {  
                console.log(data)
            }
        })
    

    文件上传

    <!-- html页面 -->
    <p><input type="file" id="id_file"></p>
    <p>用户名:<input type="text" id="id_name"></p>
    <button id="btn_file">提交</button>
    
    //ajax上传文件,js代码
    $("#btn_file").click(function () {
        var formdata = new FormData() //实例化得到一个fromdata对象
        //把文件放到对象内
        //formdata.append('myfile',文件对象)
        //拿文件对象固定格式$("#id_file")[0].files[0],我们input标签用什么id,这里对应什么id就可以取到
        formdata.append('myfile', $("#id_file")[0].files[0])
        //问题:fomdata现在只放了一个文件对象,可不可以放数据?可以
        //formdata.append('name','lqz')
        formdata.append('name', $("#id_name").val())
        $.ajax({
            url: '/uploadfile/',
            method: 'post',
            //上传文件必须写这两句话
            processData: false,
            contentType: false,
            data: formdata,
            success: function (data) {
                alert(data)
                //console.log(data)
                //location.href='http://www.baidu.com'
    
            }
        })
    })
    

    四、ajax提交json格式

    //把字典转成json格式字符串
    JSON.stringify(dic)
    //把json格式字符串转成对象
    JSON.parse(data)
    
    $.ajax({
                url:'/uploajson/',
                method:'post',
                contentType: 'application/json',
                //data需要是一个json格式字符串
                //data:'{"name":"","password":""}',
                data:JSON.stringify({name:$("#id_name1").val(),password:$("#id_password1").val()}),
                success:function (data) {
                    //返回字符串类型,需要转成js的对象,字典
    
                    //1 如果:django 返回的是HttpResponse,data是json格式字符串,需要自行转成字典
                    //2 如果:django 返回的是JsonResponse,data是就是字典,即ajax方法实现了如果响应数据是json格式,自动反序列化
                    console.log(typeof data)
                    var res=JSON.parse(data)
                    console.log(typeof res)
                    console.log(res.status)
                    console.log(res.msg)
                }
            })
    

    在后端,需要从request.body中获取到我们想要的json数据,拿到后,先利用json.loads把bytes格式的json字符串转成字典,然后对字典进行自己想要的操作,再利用JsonResponse或者HttpResponse返回

    -HttpResponse:它没有指定,text/html
    -JsonResponse:它指定了响应编码:application/json
    -ajax方法:会去看响应编码是什么,如果是application/json,自动调用JSON.parser(),如果不是json格式,就不处理
    -于是:success:function (data)  可能是个字符串,也可能是个对象,响应编码决定的
    

    五、django内置序列化器

    了解即可,不好用,后面有更好的

    1 把对象转成json格式,json.dumps实现不了,
    2 django内置了一个东西,可以把对象转成json格式
    
    
    def func1(request)
    		from django.core import serializers
    		book_list = Book.objects.all()    
    		ret = serializers.serialize("json", book_list)  # ret就是json格式字符串
    		return HttpResponse(ret)
    
  • 相关阅读:
    [Python]爬虫v0.1
    [Python]同是新手的我,分享一些经验
    [python]闭包到底是什么鬼?
    测试Flask应用_学习笔记
    Flask模板_学习笔记
    SQL Server Alwayson概念总结
    JDBC数据库编程:ResultSet接口
    JDBC操作,执行数据库更新操作
    接口怎么实例化?
    java数据库编程:JDBC操作及数据库
  • 原文地址:https://www.cnblogs.com/chiyun/p/14066937.html
Copyright © 2011-2022 走看看