Ajax和jQuery连接后端服务器两种方法

1.HTML样式简单设计

 <!-- 创建一个大容器，将内部代码包裹 -->
    <div  class=".bigbox" id="loginform"> 
        <!-- 创建表单，在内部放入具体内容 -->
        <form   class="login" >
            <h1>login</h1>
            <!-- 引入用户名前方图标 -->
            <img src="../img/用户名.png" alt="">
            <input type="text" id="username" placeholder="用户名"  required>
            <!-- 引入输入密码前方图标 -->
            <img src="../img/锁子.png" alt="">
            <input type="text" id="password" placeholder="密码" required>
            <!-- 设置按钮 -->
            <button class="btn" id="login-btn" type="button">登录</button>
        </form>
    </div>

2.fetch方法连接服务器(在script标签中书写 以post请求为例)

 <script>
        //点击login-btn后实现登录功能
        const loginbtn = document.getElementById("login-btn");
        //设置当点解了登录按钮之后，执行一下操作
        loginbtn.onclick = () =>{
            // const x = new XMLHttpRequest();
            //获取用户输入的用户名和密码
            const username = document.getElementById("username").value.trim();
            const password = document.getElementById("password").value.trim();
            //调用fetch发送请求，完成登录
            fetch("http://localhost:3000/students",{//这是我自己写的url，实际中后端接口文件会给出
                method:"POST", //设置请求方式，有GET请求和POST请求
                headers:{
                    "Content-Type":"application/json",
                    //"authorization"是附加权限信息的头
                    //格式要求：前面必须跟一个Bearer xxxx
                    "authorization":'Bearer ${token}'

                },
                //body中接收json数据，并且将其转化为字符串
                body:JSON.stringify({username,password})
            }).then(Response => Response.json()) //用箭头函数接收服务器返回的值
            .then((Response) => {  //对返回值进行分析，如果输入的用户名和密码符合服务器要求
               // 登录成功
               //如果返回值的状态码不等于服务器设定的值（这里是0），则抛出一个错误，防止代码错误执行
                if(Response.status !== 0){
                    throw new Error( "用户名或密码错误")
                }
                console.log(Response);
                window.location.href = "../index/index.html";   //实现页面跳转！！！！！
            })
            .catch((Error) => { //当输入的用户名或者密码错误时候，执行这一段代码
                console.log({
                    "status": 1,
                     "message": "登录失败,密码错误！",
                     Response
                    //登录失败  
                 }),Error
               })
        }
    </script>

2.1 GET请求讲解（向服务器加载数据）

2.1.1 GET请求基本语法

//引入express
const express = require('express');
//创建应用对象
const app = express();$.get(url,[data],[callback])
app.get('/',(_request,response)=>{ 
    //设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-oRIGIN','*');
	//设置响应
	response.send('hello express');
});

2.1.2 三个参数解释

参数名	参数类型	解释
url	String	要请求的地址
data	object	发送请求时候需要携带的参数
callback	function	请求成功时候的回调函数

2.1.3 get请求示例

//引入express
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则：
//requext  是对请求报文的封装
//response 是对响应报文的封装
app.get('/',(_request,response)=>{ 
    //设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-oRIGIN','*');
	//设置响应
	response.send('hello express');
});
//监听端口启动服务：
app.listen(8000,()=>{
	console.log ("服务已经启动,8000 端口监听中......");
})

2.2 POST请求讲解(与get用法一致，向服务器添加或修改数据)

2.2.1 POST语法

//引入express
const express = require('express');
//创建应用对象
const app = express();$.get(url,[data],[callback])
app.get('/',(_request,response)=>{ 
    //设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-oRIGIN','*');
	//设置响应
	response.send('hello express');
});

2.2.2 三个参数解释

参数名	参数类型	解释
url	String	要请求的地址
data	object	发送请求时候需要携带的参数
callback	function	请求成功时候的回调函数

2.2.3 post请求示例

//引入express
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则：
//requext  是对请求报文的封装
//response 是对响应报文的封装
app.post('/',(_request,response)=>{ 
    //设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-oRIGIN','*');
	//设置响应
	response.send('hello express');
});
//监听端口启动服务：
app.listen(8000,()=>{
	console.log ("服务已经启动,8000 端口监听中......");
})

2.2.4 post请求和get请求差别

1.GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然在Ajax请求中，这种区别对用户是不可见的。
2.GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全问题。而POST方式相对来说就可以避免这些问题。
3.GET请求主要用于向服务器中加载数据，而POST请求是向服务器新建或添加数据

3.axios方法连接服务器(在script标签中书写 以post请求为例)

  //点击login-btn后实现登录功能
  const loginbtn = document.getElementById("login-btn");
  //设置当点解了登录按钮之后，执行一下操作
  loginbtn.onclick = () =>{
	//调用axios发送请求
	//axios(config) 配置参数
	  //获取用户输入的用户名和密码
    const username = document.getElementById("username").value.trim();
    const password = document.getElementById("password").value.trim();
	axios({
		method:"post",
		URL:"http://localhost:3000/students",
		data:{   //data可以设置请求参数，相当于fetch中的body
			username,
			password
		}
	})
	//调取数据
	.then((result) => { //代码运行正常时运行这段代码
		console.log("result");
	}).catch((Error) => { //代码出现错误的时候执行这一段代码
		console.log("出错了",Error);
	})
  }

3.fetch请求和axios请求区别

fetch是具体API，基于promise，实现网络请求。axios是一个封装库，基于XHR封装，较为推荐使用。