Ajax简单使用

Ajax简单使用

通常向服务器发送请求的方法：

• 使用浏览器地址栏，输入地址，get请求
• HTML的form表单发送请求，method属性可以设置get和post两种
• a标签的href可以发送get请求
• 使用Ajax发送请求

Ajax介绍

Ajax（简称异步js和xml）请求支持get和post。特点：异步请求，局部刷新
异步请求：客户端发出一个请求后，无需等待服务器响应结束，发出第二个请求（同步请求是客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求）
局部刷新：只更新页面的一小部分（之前是整个页面刷新）
js通过语法发送请求，而不是使用html的form发送请求，通常使用json数据类型进行传输数据

简单的简绍Ajax一些字段

字段名	作用
url	请求url,默认该脚本所在的ip和端口l
type	请求方式
data	字典发送键值对
success	回调函数 执行完请求后执行函数
contentType	请求体的编码类型

jquery实现ajax

js使用json序列化和反序列化方法
序列化：JSON.stringify()传入js的一个object类，返回一个json字符串
反序列化：JSON.parse() 传入一个json序列化后的字符串，返回一个json格式数据

发送一个ajax请求

示例：

$("button").click(function () {
    $.ajax({
                url:"/play",  //请求url,默认该脚本所在的ip和端口l
                type:"get",    //请求方式
                data:{},   //字典发送键值对，
                success: function (data) {  //回调函数  执行完请求后执行函数
                    console.log(data); 
                    $("p").html(data);
                }

            }
    )
});

通常只要有url,type,data,success这几个键
ajax请求过程
向服务器请求页面-》页面触发js的ajax请求-》向服务器相应url请求-》客户端收到数据

ajax发送登录信息

示例一：

$("#btn").click(function () {
    $.ajax({
                url:"login/",
                type:"post",
                data:{"user":$("#user").val(),"pwd":$("#pwd").val()},
                success: function (data) {
                    var res = JSON.parse(data);
                    $("#res").html(res.user+":"+res.res);

                }
            }
    )
})

data直接使用键值对（object类）传入即可
当从服务端收到json格式的字符串时，js使用JSON.parse()反序列化

示例二：

$("#btn").click(function () {
    $.ajax({
        url:"",
        type:"post",
        contentType:"application/json",
        data:JSON.stringify({
            a:1,
            b:"hi"
        }),
        success: function (data) {
            console.log(data)
        }
    })
});

注意：要发送json类型的数据时，需要设置contentType为application/json

contentType字段介绍

默认application/x-www-form-urlencoded;上传文件时，使用multipart/form-data;发送json序列化后的字符串使用application/json

ajax上传文件

示例：

$("#put_file").click(function () {
    var formdata = new FormData();
    formdata.append("name",$("#name"));
    formdata.append("wj",$("#myfile")[0].files[0]);
    $.ajax({
        url:"",
        type:"post",
        contentType:false,  // 不处理数据
        processData:false,   // 不设置内容类型
        data:formdata,
        success: function (data) {
            console.log(data)
        }
    })
})

注意：上传文件时，必须使用FormData类型，然后使用append向里面传入需要传输的键值对，取文件对象时用$("#myfile")[0].files[0](myfile是一个input，text类型为file)。
为什么不处理数据和设置内容类型？因为formdate已经做完数据处理

补充

使用form表单进行传输文件

示例：

<form enctype="multipart/form-data" method="post">
    <input type="file" name="wj" id="myfile">
    <input type="text" id="name">
    <input type="submit">
</form>

注意：enctype默认是application/x-www-form-urlencoded,上传文件使用multipart/form-data,而且必须使用post方式上传。

django框架接受数据

示例一：

后台接受文件数据方法。在视图函数views.py中

def file_put(request):
    if request.method == "POST":
        if request.FILES:
            file_obj = request.FILES.get("wj")
            print(request.FILES)
            print(request.POST)
            with open(file_obj.name,"wb") as f:
                for line in file_obj:
                    f.write(line)
            return HttpResponse("OK")
        else:
            return  HttpResponse("文件不存在")
    else:
        return render(request,"file.html")

注意：使用request.FILES才可以接收到一个文件对象字典，从中取到相应的文件对象，然后就可以读取并写入本地。file_obj.name代表文件名

示例二：

后台发送json数据方法

def login(request):
    user = request.POST.get("user")
    pwd = request.POST.get("pwd")
    res = Info.objects.filter(user=user,password=pwd)
    if res:
        res_str = json.dumps({"res":True,"user":user})
        return HttpResponse(res_str)
    else:
        res_str = json.dumps({"res":False,"user":user})
        return HttpResponse(res_str)

注意：先从数据库内取出相应的数据，然后用json.dumps()将数据序列化，发送过去

示例三：

后台接受json数据的方法

def file_put(request):
    print(request.body)
    pre_str = request.body
    data=json.loads(pre_str)
    print(data)
    print(data.get("b"))
    return HttpResponse("OK")

注意：request.body请求报文中的请求体，然后用json.loads()来反序列化接受的字符串

request.body和request.POST取出的数据有什么不同？

request.body直接取出请求请求体内的原始数据，而request.POST取出的是处理后的键值对。比如：前端同样用post请求发送两个键值对a=1&b=2，这些数据将放入请求体中（而get请求则是将数据放到url中），使用request.body取出的内容是b'a=1&b=1',而request.POST取出的内容时<QueryDict: {'a': ['1'], 'b': ['1']}>