javascript - ajax验证提交的用户名和密码是否正确

Question

   首先在这里吐槽下，由于自己学的是前端，去到第一间公司让我做的事就是每天都布局p+css，所以没学到什么，转到第二间公司做前端的就我一个人，而我就真的只是做前端，甚至可以说就是用txt文本去写的，压根没粘到后台一点边，然后现在要我做这个用ajax验证提交的用户名和密码,我真无从下手，有哪位大神能救下我，这样没有数据交互我怎么去验证啊，而且我学的也不多

Answer 1

$.ajax({
    // 请求发送方式
    type: 'post',
    // 验证文件
    url: 'check.php',
    // 用户输入的帐号密码
    data: {'username': $("#username").val(), 'password': $("#password").val()},
    // 异步，不写默认为True
    async: true,
    //请求成功后的回调
    success: function(data){
        if (data){
            alert('登录成功')
        }else{
            alert('帐号或密码错误');
        }
    },
    error: function(){
        alert('服务端异常');
    }

})

服务端通过查询 输入 1 或者 0 来判断是否正确
建议前后端通过json来传输数据

Answer 2

举个简单的例子（下面代码用到jQuery的$.ajax函数）：

$.ajax({
    method: 'post',
    url: '...',
    dataType: 'text',
    // 用户名和密码
    data: {username: username, password: password},
    success: function(data){
        // 假设后端传回的 1 表示成功， 0 表示用户名或密码错误
        if (data) {
            alert("验证通过");
        } else {
            alert("用户名或密码错误");
        }
    }
});

这里我使用了jQuery的$.ajax函数，所以写起来比较方便，$.ajax还有许多详细的参数可以去查查api。

Answer 3

登录验证的后台有人写了吧？如果你只要写前台的话，要做的只是：

1. 验证表单信息是否完善（格式是否正确）
2. 如果验证失败，友好的提示错误
3. 否则，通过 ajax 将用户名，密码等相关信息存入一个对象（data）发送给后台（当然你得知道后台验证登录信息的 url）

$.ajax({
        type:"POST",
        url:"validate.php",
        data: data,
        success: function(data) {
            // 回调
        }
    });