WebStorm记录(3)
2024-10-13 18:20:11
连通接口
接口
我自己理解前后端传输数据都是通过ajax方式
一般使用get和post两种方式传输数据
GET
接口
接口描述 | 获取登录验证码图片及密钥 |
---|---|
HTTP方法 | POST |
URL | /captcha |
HTTP头部 | 无 |
HTTP请求BODY | 无 |
HTTP响应消息内容 |
{
"status": int,
"msg": string,
"data": {
"pic": string,
"captchaEncrypt": string
}
}
代码
var u = "http://121.42.161.235:9091";
var o;
// 验证码
function safecode() {
o = $.ajax({
type: 'POST',
url: u + "/captcha",
async: false,
success: function(result) {
$('#safecode-img').attr('src', "data:image/jpeg;base64," + result.data.pic);
}
});
}
safecode();
POST
接口
接口描述 | 前台将用户名、密码、验证码及验证码密钥提交至服务端进行登录验证,登录成功后会返回token,登录失败则返回提示信息 |
---|---|
HTTP方法 | POST |
URL | /login |
HTTP头部 | 无 |
HTTP请求BODYBODY |
{
"username": string //用户名
"password": string //密码
"captcha": string //验证码
"captchaEncrypt": string //验证码密钥,此字段为获取验证码时给前端传递的参数
}
HTTP响应消息内容
{
"status": int,
"msg": string,
"data": {
"token": string // 客户端token
}
}
代码
参考:https://blog.csdn.net/liyongjian12/article/details/54844827
// 登录方法
function submitTest() {
// 校检
// 观察值
// let userName = document.getElementById("userName").value;
// let password = document.getElementById("password").value;
// let captcha = document.getElementById("captcha").value;
let userName = "sa";
let password = "111111";
let captcha = "5k83";
// 登录
var logininfo = $.ajax({
type: 'POST',
url: u + "/login",
async: false,
dataType: "json",
contentType: "application/json",
data: JSON.stringify({
"username": userName, //用户名
"password": password, //密码
"captcha": captcha, //验证码
"captchaEncrypt": "0BB5E9A26A099E34F6F076270B519894"
// "captchaEncrypt": o.responseJSON.data.captchaEncrypt //验证码密钥,此字段为获取验证码时给前端传递的参数
}),
success: function(result) {
console.log(result.data.token);
}
});
console.log(logininfo);
}
submitTest();
AJAX
jQuery听说会被代替,永的不多了
参考:原生js的ajax请求:http://www.cnblogs.com/cythia/p/6978323.html
什么是ajax
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
XMLHttpRequest 对象
XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest
方 法 | 描 述 |
---|---|
abort() | 停止当前请求 |
getAllResponseHeaders() | 把HTTP请求的所有响应首部作为键/值对返回 |
getResponseHeader("header") | 返回指定首部的串值 |
open("method","URL",[asyncFlag],["userName"],["password"]) | 建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数,是否异步,用户名,密码 |
send(content) | 向服务器发送请求 |
setRequestHeader("header", "value") | 把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 ('post'方法一定要 ) |
五步使用法:
- 创建XMLHTTPRequest对象
- 使用open方法设置和服务器的交互信息
- 设置发送的数据,开始和服务器端交互
- 注册事件
- 更新界面
下面给大家列出get请求和post请求的例子
get请求:
//步骤一:创建异步对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open('get', 'getStar.php?starName=' + name);
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
//步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
console.log(ajax.responseText); //输入相应的内容
}
}
post请求:
//创建异步对象
var xhr = new XMLHttpRequest();
//设置请求的类型及url
//post请求一定要添加请求头才行不然会报错
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.open('post', '02.post.php');
//发送请求
xhr.send('name=fox&age=18');
xhr.onreadystatechange = function() {
// 这步为判断服务器是否正确响应
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
为了方便使用,我们可以把他封装进方法里面,要用的时候,直接调用就好了
function ajax_method(url, data, method, success) {
// 异步对象
var ajax = new XMLHttpRequest();
// get 跟post 需要分别写不同的代码
if (method == 'get') {
// get请求
if (data) {
// 如果有值
url += '?';
url += data;
} else {}
// 设置 方法 以及 url
ajax.open(method, url);
// send即可
ajax.send();
} else {
// post请求
// post请求 url 是不需要改变
ajax.open(method, url);
// 需要设置请求报文
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 判断data send发送数据
if (data) {
// 如果有值 从send发送
ajax.send(data);
} else {
// 木有值 直接发送即可
ajax.send();
}
}
// 注册事件
ajax.onreadystatechange = function() {
// 在事件中 获取数据 并修改界面显示
if (ajax.readyState == 4 && ajax.status == 200) {
// console.log(ajax.responseText);
// 将 数据 让 外面可以使用
// return ajax.responseText;
// 当 onreadystatechange 调用时 说明 数据回来了
// ajax.responseText;
// 如果说 外面可以传入一个 function 作为参数 success
success(ajax.responseText);
}
}
}
最新文章
- 关于C#的微信开发的入门记录一
- 【bzoj2281】 Sdoi2011—黑白棋
- HTML5 之Canvas绘制太阳系
- 通过SSIS监控远程服务器Windows服务并发送邮件报警!
- 【开源框架】EFW框架中的系统权限与页面子权限详解
- LeetCode:Path Sum I II
- Linux free -m 详细说明
- URAL 1957 Wrong Answer 暴力
- 服务启动项 Start类型详解
- 27_Blog Reader
- linux--关于shell的介绍
- JavaEE(20) - Web层和EJB的整合(Entity Manager)
- [译]Java 设计模式之装饰器
- Docker网络——单host网络
- Node.js之错误处理与断言处理
- 关于系统首页绘制问题(ext布局+c#后台加入数据)经html输出流输出响应client
- springmvc+mybatis环境搭建
- BUAA_OO第一单元总结
- [C++]2-3 倒三角形
- 推荐linux下的数据库开发工具DBeaver 开源免费
热门文章
- CF1106F Lunar New Year and a Recursive Sequence
- Windows如何使用bin文件下的命令
- 【POJ1037】A decorative fence(DP)
- ALLOT流控设备操作手册指引
- [luogu3628][bzoj1911][APIO2010]特别行动队【动态规划+斜率优化DP】
- 「TJOI2015」旅游 解题报告
- Atlantis HDU - 1542 (扫描线,线段树)
- Pro Git
- 8、16、32-BIT系列单片机区别与特点
- 低电平ViL