jQuery

jQuery中的Ajax

Nick · 1月27日 · 2020年 · 本文3609字 · 阅读10分钟707

本地环境简单搭建

为什么要环境搭建

因为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>
0 条回应
在线人数:1人
隐藏