Ajax简单使用

傷城~ 2022-05-12 08:22 243阅读 0赞

# Ajax简单使用 #

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

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

## Ajax介绍 ##

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

## 简单的简绍Ajax一些字段 ##

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

## 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表单进行传输文件 ###

示例：

注意：`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']}>`