ajax

1 ajax介绍

# 1 异步 Javascript 和 XML:
	-异步:跟同步是对应的   
    -javascript:通过javascript来操作,发送异步请求 ,到服务端
    -xml:数据交互使用xml,现在主流使用json格式
    -xml:可阅读性比较高,解析复杂,占的空间大
        <name>lqz</name>
        <age>19</age>
    -json:可阅读性比较高,解析简单,占的空间小
    	{"name":"lqz","age":19}
	-浏览器页面局部刷新(js的dom操作)
    
    -通过js发送http的请求(go,java,php,requset)

# 2 同步交互和异步交互
    同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
    异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。
    
   AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新;(这一特点给用户的感受是在不知不觉中完成请求和响应过程)

2 ajax的简单使用

1 原生js写ajax请求(写起来很复杂,而且需要考虑浏览器版本)
2 jquery帮咱们封装好了一个方法 ajax,我们直接调用jquery的方法,就可以发送ajax的请求
3 后期,前后端分离了,还可以继续使用jquery的ajax, axios更主流一些
4 现在我们学的jquery的ajax方法的使用


5 需求:通过Ajax,实现前端输入两个数字,服务器做加法,返回到前端页面

6 模板
    $.ajax({
        url: '/add/',  
        method: 'post',
        data:{'a':$("#first").val() ,'b':$("#second").val() },
        success:function (data) {
            //成功触发
        },
        error:function (error) {
            //失败,触发
        }
    })
    
    
    # 默认清空下ajax会把{'a':$("#first").val() ,'b':$("#second").val() }数据转成
    # 预处理数据
    a=20&b=30,放到body体中
    # 编码默认用urlencoded

3 ajax上传文件

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

3 固定模板
    var formdata=new FormData() 
    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)
            }
        })

4 ajax提交json格式

$.ajax({
            url:'/uploajson/',  //写全,是什么样就写什么样
            method:'post',
            contentType: 'application/json',
            //data要是json格式字符串
            //data:'{"name":"","password":""}',
            //把字典转成json格式字符串
            //JSON.stringify(dic)
            //把json格式字符串转成对象
            //JSON.parse(data)
            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)


            }
        })

5 django内置序列化器(了解,不好用,后面有更好的)

1 把对象转成json格式,json.dumps实现不了,
2 django内置了一个东西,可以把对象转成json格式
from django.core import serializers
book_list = Book.objects.all()    
ret = serializers.serialize("json", book_list)  # ret就是json格式字符串


ll=[]
for book in book_list:
    ll.append({'name':book.name,'price':book.pirce})  
import json
ret=json.dumps(ll)


return HttpResponse(ret)
posted @ 2020-10-19 20:22  刘海子  阅读(74)  评论(0编辑  收藏  举报