JQuery中Ajax的操作及应用实例

使用Ajax与后台交互

知兮丶青 js · ajax
阅读(500) 2017-12-05
JQuery中Ajax的操作及应用实例
JQuery中Ajax的操作及应用实例

开发工作中,jquery ajax被常常用到,尤其是在无刷新页面完成异步请求的应用上。说明:以下代码仅供学习和研究使用,是为了方便用户测试而提供的样例代码,只是提供一个参考。


我的环境

jQuery v1.11.1


常用参数

url  提交请求的URL,默认当前路径

type  请求的类型(GET 或 POST)

async  是否异步处理。默认是 true。

data  需要提交到服务器的数据

dataType  服务器返回数据的类型,例如xml、json、script、html等

success(result,status,xhr)  请求成功后的回调函数,xhr:XMLHttpRequest

error(xhr,status,error)  请求失败后的回调函数


操作及应用

简单示例

get和post底层也是调用了ajax,只是对其封装了更方便的调用get和post。

ajax 方式

$.ajax({
    'url':'user/simple.php',
    'type':'post',//get
    'data':{},
    'dataType':'json',
    'success':function(result,status,xhr){
        console.log(result);
        //Object {data: "测试"}
    },
    'error':function(xhr,status,error){
        console.log('status:'+ status + ' error:' + error);
        //错误输出:status:error error:Internal Server Error
    }
});

post 方式

$.post("user/simple.php",{},function(result,status,xhr){
    console.log(result);
    //Object {data: "测试"}
},'json').error(function(xhr,status,error){
    console.log(status + ' ' + error);
    //错误输出:status:error error:Internal Server Error
});

get 方式

$.get("user/simple.php",function(result,status,xhr){
    console.log(result);
    //Object {data: "测试"}
},'json').error(function(xhr,status,error){
    console.log(status + ' ' + error);
    //错误输出:status:error error:Internal Server Error
});

后端 simple.php

<?php

//header('HTTP/1.0 500 Internal Server Error');
//throw new Exception("抛出错误");

die(json_encode(array('data'=>'测试')));

XMLHttpRequest

abort: (a)
always: ()
complete: ()
done: ()
error: ()
fail: ()
getAllResponseHeaders: ()
getResponseHeader: (a)
overrideMimeType: (a)
pipe: ()
progress: ()
promise: (a)
readyState: 4
responseJSON: Object
responseText: "{"data":"\u6d4b\u8bd5"}"
setRequestHeader: (a,b)
state: ()
status: 200
statusCode: (a)
statusText: "OK"
success: ()
then: ()
__proto__: Object



登录示例

异步登录 ajax login

前端 login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery中Ajax的操作(实例二)- 模拟登陆</title>
    <script type="text/Javascript" src="jquery.min.js"></script>
</head>
<body>
<form name="loginForm" action="user/login.php" method="post">
    <p><input type="text" name="username" value="" placeholder="请输入账号"/></p>
    <p><input type="password" name="password" value="" placeholder="请输入密码"/></p>
    <p><input type="button" value="登录"/></p>
</form>

<script type="text/Javascript">
    //点击登录按钮触发点击事件
    $('input[type=button]').click(function () {
        loginSubmit(this);
    });

    function loginSubmit(_this) {
        //提交按钮
        var btn = $(_this);
        //验证账号
        var username = $('input[name=username]').val();
        if (username == null || username == '') {
            alert("用户名不能为空");
            return;
        }
        //验证密码
        var password = $('input[name=password]').val();
        if (password == null || password == '') {
            alert("密码名不能为空");
            return;
        }
        //form表单
        var form = $('form[name=loginForm]');
        //异步登录
        $.ajax({
            'url': 'user/login.php',
            'type': 'post',
            'data': form.serialize(),//序列化表单
            'dataType': 'json',
            'beforeSend': function () {
                //提交前禁用按钮
                btn.attr('disabled', 'disabled');
            },
            'success': function (result, status, xhr) {
                console.log(result);
                //什么都不输入点击登录 - 前端不判断空情况
                //Object {success: false, message: "账号和密码不能为空", data: null}
                //输入用户名或密码错误
                //Object {success: false, message: "用户名或密码错误", data: null}
                //用户名及密码正确
                //Object {success: true, message: null, data: "登录成功"}
                if (result.success) {
                    //登录成功
                    alert(result.data);
                } else {
                    //登录失败
                    alert(result.message);
                }
                //恢复按钮
                btn.removeAttr("disabled");
            },
            'error': function (xhr, status, error) {
                //登录异常
                console.log('status:' + status + ' error:' + error);
                //恢复按钮
                btn.removeAttr("disabled");
            }
        });
    }
</script>
</body>
</html>

后端 login.php

<?php

//接收数据
$username = $_POST['username'];
$password = $_POST['password'];
//定义返回结果
$result = array('success' => false, 'message' => null, 'data' => null);
//模拟登陆场景
if(empty($username) || empty($password)){
    $result['message'] = '账号和密码不能为空';
    echo json_encode($result);
    exit;
}
//这里简单模拟 - 用户名为admin,密码为123456
//实际需查询数据库,再判断其密码、用户状态和密码md5等判断操作
if($username!="admin" || $password!="123456"){
    $result['message'] = '用户名或密码错误';
    echo json_encode($result);
    exit;
}

$result['success'] = true;
$result['data'] = '登录成功';
echo json_encode($result);
exit;




原创文章,转载请注明出处:https://www.weizhixi.com/article/17.html