提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jQuery中的Ajax

jQueryAJAX
2023-06-13 09:11:25 时间

本地环境简单搭建

为什么要环境搭建

因为Ajax是基于服务器来运行的，需要配置服务器环境来实现对本地资源的访问。

环境搭建有很多种

  • 下载phpstudy集成环境
  • appserv集成环境、xammp、phpstudy、wampserver
  • xammp、phpstudy、wampserver
  • 编译器自带的环境（**VSCode****）

如何使用VsCode自带的服务器环境

  1. 在VSCode中下载 Live Server插件
  2. 在vsCode下方会出现这样的图标，运行带有Ajax请求的文件时，直接点击该图标运行
  3. 本环境自动以打开的本文件夹作为服务器的根目录，端口可以自行改变

jQuery中的Ajax

GET请求和POST请求的异同

相同点: 都是将数据提交到远程服务器 不同点: 1. 提交数据存储的位置不同 GET请求会将数据放到URL后面 POST请求会将数据放到请求头中 2. 提交数据大小限制不同 GET请求对数据有大小限制 POST请求对数据没有大小限制

js原生Ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>原生Ajax</title>
    <!--
    1.什么是Ajax?
    AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
    -->
    <script>
        window.onload = function (ev) {
            var oBtn = document.querySelector("button");
            oBtn.onclick = function (ev1) {
                // 1.创建一个异步对象
                var xmlhttp=new XMLHttpRequest();
                // 2.设置请求方式和请求地址
                /*
                method：请求的类型；GET 或 POST
                url：文件在服务器上的位置
                async：true（异步）或 false（同步）
                */
                xmlhttp.open("GET", "./data/ajaxTest.json", true);
                // 3.发送请求
                xmlhttp.send();
                // 4.监听状态的变化
                xmlhttp.onreadystatechange = function (ev2) {
                    /*
                    0: 请求未初始化
                    1: 服务器连接已建立
                    2: 请求已接收
                    3: 请求处理中
                    4: 请求已完成，且响应已就绪
                    */
                    if(xmlhttp.readyState === 4){
                        // 判断是否请求成功
                        if(xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                           xmlhttp.status === 304){
                            // 5.处理返回的结果
                            console.log("接收到服务器返回的数据");
                        }else{
                            console.log("没有接收到服务器返回的数据");
                        }

                    }
                }
            }
        }
    </script>
</head>
<body>
<button>发送请求</button>
</body>
</html>

jQuery使用Ajax

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
    <script src="./lib/jquery/jquery.js"></script>
    <style>
        form {
            width: 500px;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <button type="button" class="btn btn-primary" id="submit">发送请求</button>
    <script>
        $("#submit").click(function () {
            var username = $('#username').val();
            var password = $('#password').val();
            $.ajax({
                url: "./data/ajaxTest.json",//请求和发送数据地址
                type: "get",//请求方式
                data:{"username":userNname,"password":password},//要发送给后台的数据，可以在后台接收
                dataType: "json", //返回数据类型
                success: function (xhr) { //成功
                    console.log('xhr :', xhr); //返回的就是一个json对象，可以直接使用
                    console.log('xhr[0].username :', xhr[0].username);
                    console.log('xhr[0].password :', xhr[0].password);
                },
                error: function () { //失败
                    alert("服务器出错，，，")
                }
            })
        })
    </script>

</body>

</html>

AjaxTest案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css">
    <script src="./lib/jquery/jquery.js"></script>
    <style>
        form {
            width: 500px;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <!-- 本来表单中的数据应该发送到后台进行数据操作，由于还没有学习后端语言，先在前端调用后端的数据进行数据操作 -->
    <form action="" method="POST" role="form">
        <legend style="text-align: center;">请登录</legend>
        <div class="form-group">
            <label for="">用户名</label>
            <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
        </div>
        <div class="form-group">
            <label for="">密码</label>
            <input type="password" class="form-control" name="username" id="password" placeholder="请输入密码">
        </div>
        <button type="button" class="btn btn-primary" id="submit">登录</button>
    </form>


    <script>
        $("#submit").click(function () {
            var username = $('#username').val();
            var password = $('#password').val();
            $.ajax({
                url: "./data/ajaxTest.json",
                type: "get",
                dataType: "json",
                success: function (xhr) { //成功
                    // var data = eval('('+data+')');
                    // console.log(xhr[1]);
                    /* console.log(xhr.username);
                    console.log(xhr.password); */

                    var flag = false;
                    for (let i = 0; i < xhr.length; i++) {
                        console.log('xhr[i] :', xhr[i]);
                        if (username === xhr[i].username && password === xhr[i].password) {
                            flag = true;
                            break;
                        }
                    }
                    if (flag) {
                        confirm("登录成功！");
                        window.location.href = "http://www.xyc.edu.cn/";
                    } else {
                        confirm("用户名或密码错误")
                    }


                },
                error: function () { //失败
                    alert("服务器出错，，，")
                }
            })
        })
    </script>

</body>

</html>

相关文章