ajax 上传文件，post上传文件，ajax 提交 JSON 格式的数据

ajax简介

前后台做数据交互

前后端做数据交互的方式（三种）：    
（1）浏览器窗口输入地址（get的方式）
（2）form表单提交数据
（3）ajax提交数据

特点

特点：
　　（1）异步
　　　　　　异步与同步的区别：同步是请求发过去，要等着回应；异步不需要等待，可以进行其他操作
　　（2）局部刷新

使用

使用：
        （1）url:匹配的路由
        （2）type:发送的的方式
        （3）data:发送的数据
        （4）success:发送的数据成功回调条数

         $('.btn').click(function () {
             $.ajax({
                url:'/index/',
                type:'post',
                data:{"name":'lqz',"age":18},
                success:function (data) {
                    alert(data)
                }
            })
         });

        前端知识点：
            $('#id') : JQ获取标签
            $('#id').val() : 获取值
            js跳转页面：location.href = 'https://www.baidu.com/'

post 上传文件

# 知识要点：
# enctype="multipart/form-data"   # 传文件格式
# enctype="application/x-www-form-urlencoded"   # 默认格式

# 模板层：
<form action="/myfiles/" method="post" enctype="multipart/form-data">
　　<input type="file" name="myfile">
　　<input type="submit" value="提交">
</form>

# 视图层：
def myfiles(request):
　　if request.method == 'GET':
　　　　return render(request, 'myfiles.html')
　　files = request.FILES     # 拿到字典 {'myfile': [<InMemoryUploadedFile: 111.png (image/png)>]}>
    my_file = files.get('myfile') # 取出文件流
    with open(my_file.name,'wb') as f:  # 写入文件
    　　for i in my_file:
    　　　　f.write(i)
    return HttpResponse('OK')

ajax 上传文件

# 知识要点：
# 传文件用 FormData 类
# 往对象里（字典）添加值

$('.btn').onclick(function () {
    var fordata = new FormData(); # 生成文件对象
    fordata.append('name',$('#name').val()); # 添加值
    fordata.append('myfiles',$('#myfiles')[0].files[0]); # 添加文件流
    
    $.ajax({
        url:'/ajaxfiles/',  # 路由
        type:'post',  # 请求的形式

        processData:false,  # 不指定编码方式（默认指定编码 urlencode）
        contentType:false,  # 不处理数据(默认处理数据：name=lxx &age=18)

        data:fordata,  # 传文件的数据
        success:function (data) {  # 请求成功回调函数
            alert(data)
        }
    })
})

ajax 提交 Json 格式的数据

# 知识要点：
# Json.stringify : 相当于序列化成字符串的形式
# Json.parse : 相当与反序列化

# $('.div').text('xx')：修改标签内容

# 发送Json格式的请求方式
# contentType:'application/json'

# 响应回来解析的方式(不管后台传过来的数据，都给我反序列化)
# dataType:'json',

# 返回用JsonResponse,Django自动反序列化


# 模板层：
$('.btn').click(function () {
    var post_data={'name':$("#name").val(),'pwd':$("#pwd").val()};
    var post=JSON.stringify(post_data);  # 序列化传到后台数据

    $.ajax({
        url:'/jsonfile/',
        type:'post',
        data:post, # 携带的数据
        contentType:'application/json',  # 发送json格式的数据的请求
        dataType:'json',   # 响应回来的解析方式
        success:function (data) {
            var ret=JSON.parse(data);  反序列化
        }
    })
})


# 视图层：
def add_json(request):
    if request.method=='GET':
        return render(request,'jsonfile.html')

    import json
    res=json.loads(request.body.decode('utf-8')) # json数据从body体内取值

    dic={'status':'100','msg':'登录成功'}
    # return HttpResponse('ok')
    # 返回给前台json格式
    # return HttpResponse(json.dumps(dic))
    return JsonResponse(dic)  # 直接返回json字符串

补充知识点

补充知识点（1）
    JQ 显示文字 data.status
    $('.div').text('xx')：修改标签内容

补充知识点（2）
    静态文件导入（3种）

作业:
   1 用户在表单输入用户名与密码，通过Ajax提交给服务器，服务器验证后返回响应信息，客户端通过响应信息确定是否登录成功，
       成功，则跳转到百度，否则，在页面上显示相应的错误信息location.href='http://www.baidu.com'

   2  两种提交数据的方式(urlencoded,json)

   3 手动创建第三张表:
      给红楼梦这本书新增lqz作者
      给红楼梦这本书删除egon作者
      把红楼梦这本书所有作者替换为lqz
      查询红楼梦这本书所有作者的的姓名
      查询作者名为lqz写的所有书
   4 上课讲的敲一遍


ajax 上传文件/提交jsan格式的数据 前后端数据交互