本地环境简单搭建
为什么要环境搭建
因为Ajax是基于服务器来运行的,需要配置服务器环境来实现对本地资源的访问。
环境搭建有很多种
- 下载phpstudy集成环境
- appserv集成环境、xammp、phpstudy、wampserver
- xammp、phpstudy、wampserver
- 编译器自带的环境(**VSCode****)
如何使用VsCode自带的服务器环境
- 在VSCode中下载 Live Server插件
- 在vsCode下方会出现这样的图标,运行带有Ajax请求的文件时,直接点击该图标运行
- 本环境自动以打开的本文件夹作为服务器的根目录,端口可以自行改变
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>