WebStorm记录(3)

WebStorm记录(3)

连通接口

接口

我自己理解前后端传输数据都是通过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'方法一定要 )

五步使用法:

1. 创建XMLHTTPRequest对象
2. 使用open方法设置和服务器的交互信息
3. 设置发送的数据，开始和服务器端交互
4. 注册事件
5. 更新界面

下面给大家列出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);
        }
    }
}