Ajax在不同场景下的运用（基础篇）

男娘i 2024-02-17 09:28 4阅读 0赞

## 一、Ajax的简介 ##

#### Ajax ####

Ajax 就是一种用于在网页中进行异步通信的技术。  
一般情况下使用Ajax 就是为了让网页的数据和后台的数据进行实时交换，在不刷新页面的情况下，就可以将数据传入到后台或从后台获取到最新数据。  
使用Ajax主要还是用来提高网页的响应速度和交互性，实时动态的加载内容，表单验证，无刷新提交等功能。  
顺便在这里比较一下异步和同步之间的区别

#### 同步和异步 ####

###### 同步 ######

优点：可以保留浏览器后退按钮的正常功能。在动态更新页面的情况下，用 户可以回到前一个页面状态，浏览器能记下历史记录中的静态页面，用户通常都希望单机后退按钮时，就能够取消他们的前一次操作，同步交互可以实现这个需求。

缺点：1. 同步交互的不足之处，会给用户一种不连贯的体验，当服务器处理请求时，用户只能等待状态，页面中的显示内容只能是空白。

2.因为已经跳转到新的页面，原本在以页面上的信息无法保存，好多信息需要重新填写。

###### 异步 ######

优点：1.前端用户操作和后台服务器运算可以同时进行，可以充分利用用户操作的间隔时间完成运算。

2.页面没有跳转，响应回来的数据直接就在原页面上，页面原有信息得以保留。

缺点：可能破坏浏览器后退按钮的正常行为。在动态更新页面的情况下，用户无法回到前一个页面状态，这是因为浏览器仅能记录的始终是当前一个的静态页面。用户通常都希望单击后退按钮，就能够取消他们的前一次操作，但是再AJAX这样异步的程序，无法做到。

## 二、Ajax在不同场景下的使用 ##

#### 在注册账号的时候，实时判断用户是否已经存在 ####

![在这里插入图片描述][5668c4524ede46d19b07339e19566add.png]  
想这种在注册账号的时候，输入用户名后，当输入框失去焦点后，直接将数据传入后台，进行数据库比对，看此时是否存在重复用户名。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="/ha/js/jquery-3.5.1.min.js"></script>
    </head>
    <body>
    <form action="/user/form/register" method="post">
        <input type="text" name="name1">
        <p id="relName"></p>
        <input type="text" name="pwd">
        <input type="submit" name="but">
    </form>
    
    <script>
        var name1 = document.getElementsByName('name1')[0];
    
        name1.onblur = function () {
          
            const userName = name1.value
            $.ajax({
          
                url : "/user/register_ajax",
                type : "POST",
                data : {
          
                    "uname" : userName
                },
                success :function (infor) {
          
                    document.getElementById('relName').innerText = infor["mag"];
                    if (infor["mag"].length == 0){
          
                        document.getElementsByName('but')[0].disabled = false;
                    }else {
          
                        document.getElementsByName('but')[0].disabled = true;
                    }
                },
            })
        }
    </script>
    </body>
    </html>

#### 在form表单中上传单个文件 ####

在表单中上传一个文件后，直接通过异步操作将文件传送到后台。  
这种在不刷新页面的情况下进行文件上传，可以让用户在上传过程中继续与网页进行交互，改善了用户界面的友好性。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="ha/js/jquery-3.5.1.min.js"></script>
    </head>
    <body>
    <form action="/ajaxFile" enctype="multipart/form-data" method="post">
        <input type="file" class="myfile" name="myfile">
        <input type="button" value="提交按钮" id="but">
    </form>
    
    <script>
        var but = document.getElementById("but");
        but.onclick = function () {
          
            console.log($(".myfile")); // 获取到 class 为myfile的所有文件，形式 以数组存放
            console.log($(".myfile")[0]) //  获取到 class为 mufile 中的 第一个文件
            console.log($(".myfile")[0].files)  // 获取到 class为 mufile 中的 第一个文件 中的所有文件
            console.log($(".myfile")[0].files[0])  // 获取到 class为 mufile 中的 第一个文件 中的所有文件 中的第一个文件
            // 创建一个 存放 form 表单的数据:
            var form_data = new FormData();
            // 往form_data 添加要传入后台的元素:
            form_data.append("file",$(".myfile")[0].files[0]);
            // 利用 ajax 向后台传入数据
            $.ajax({
          
                url:"/ajaxFile" ,
                type :"POST",
                data : form_data,
                contentType : false, // 默认为 true，当为 true时，ajax提交的时候不会序列化data，而是直接使用data
                processData: false, // 防止上传文件中 出现分节符号 导致服务器无法正确识别文件起始位置
                success :function () {
          
    
                }
            })
        }
    </script>
    </body>
    </html>
    
    func main() {
    	router := gin.Default()
    	//  加载 html 文件
    	router.LoadHTMLGlob("temp/*")
    	// 将 /s 映射到 static 目录，当客户端请求 /s 路径时，gin框架会到 static目录下找文件
    	router.Static("ha", "static") // 第一个参数是相对路径，第二个参数是文件夹名称。 含义： 这个相对路径映射到那个文件夹上
    	router.GET("/index", myfun.Index09)
    	router.POST("/ajaxFile", myfun.AjaxFile)
    	router.Run()
    }
    func AjaxFile(context *gin.Context) {
    
    	file, _ := context.FormFile("file")
    	// 定义一个时间戳
    	time_int := time.Now().Unix()
    	time_str := strconv.FormatInt(time_int, 10)
    	// 保存到本地
    	context.SaveUploadedFile(file, "static//imgs//"+time_str+file.Filename)
    	context.String(200, "文件上传成功")
    }

#### 在form表单中上传多个文件 ####

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="ha/js/jquery-3.5.1.min.js"></script>
    </head>
    <body>
    <form action="/ajaxFile" enctype="multipart/form-data" method="post">
        <input type="file" class="myfile">
        <input type="file" class="myfile">
        <input type="button" value="提交按钮" id="but">
    </form>
    
    <script>
        var but = document.getElementById("but");
        but.onclick = function () {
          
            console.log($(".myfile")); // 获取到 class 为myfile的所有文件，形式 以数组存放
            console.log($(".myfile")[0]) //  获取到 class为 mufile 中的 第一个文件
            console.log($(".myfile")[0].files)  // 获取到 class为 mufile 中的 第一个文件 中的所有文件
            console.log($(".myfile")[0].files[0])  // 获取到 class为 mufile 中的 第一个文件 中的所有文件 中的第一个文件
            // 创建一个 存放 form 表单的数据:
            var form_data = new FormData();
            // 往form_data 添加要传入后台的元素:
            for (var i = 0;i<$(".myfile").length ;i++){
          
                form_data.append("file",$(".myfile")[i].files[0]);
            }
    
            // 利用 ajax 向后台传入数据
            $.ajax({
          
                url:"/ajaxFile" ,
                type :"POST",
                data : form_data,
                contentType : false, // 默认为 true，当为 true时，ajax提交的时候不会序列化data，而是直接使用data
                processData: false, // 防止上传文件中 出现分节符号 导致服务器无法正确识别文件起始位置
                success :function () {
          
    
                }
            })
        }
    </script>
    </body>
    </html>

[5668c4524ede46d19b07339e19566add.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/06/9cd3528796a14c9588280b3b946c2f60.png