ajax实战

Posted 2021-04-15 Ado的日记本

背景:

周五老大写了两个接口, 让我写个demo练习使用ajax. 用GET请求展示, POST修改。由于之前没有做过交互,还遇到了一个跨域问题，折腾了好久,查了很多资料,也请教了朋友,收获颇丰.记录一下.
今晚临走前老大给我说让我自学Vue，又是忙碌充实的一段时间！

给的接口信息:

http://192.168.1.204:8090/manager
/user/list
/user/get/{id}
/user/edit/{id}
edit 参数 userId, username, nickName, sex, address
sex 1 男 2 女

代码:
初始化

var baseURL = 'http://192.168.1.204:8090/manager';
function init(){
    $.ajax({
        url: baseURL + '/user/list',
        type: 'GET',
        dataType: 'json',
    }).done(function (res) {
           let userList = $(` 模板 `) //ES6的模板字符串
            $('#userList_1').append(userList)
        }
    }).fail(function () {
        alert('初始化失败!')
    })
}

查询

function readingUser(id) {
    $.ajax({
        type: 'GET',
        url: baseURL + '/user/get',
        dataType: 'JSON',
        data: {
            userId: id,
        }
    }).done(function (res) {
       //把数据展示出来
    }).fail(function () {
        alert('读取失败!')
    })
}

修改

function edit(){
    $.ajax({
        type: 'POST',
        url: baseURL + '/user/edit',
        data: $('#from1').serialize(), 
            // data: {
            //     "userId": $('#userid_1').val(),
            //     "username": $('#username_1').val(),
            //     "nickName": $('#nickname_1').val(),
            //     "sex": $('#sex_1').val(),
            //     "address": $('#address_1').val(),
            // },
    }).done(function(){
        window.location.reload();
    }).fail('修改失败!')
}

完整代码:
https://github.com/Jamamm/demos/blob/master/javascript/demo%20-%20ajax.html