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格式的数据 前后端数据交互