Ajax与JSON的一些学习总结

我来为你详细讲解“Ajax与JSON的一些学习总结”的攻略。

什么是Ajax？

Ajax是Asynchronous JavaScript and XML的缩写，即异步的JavaScript和XML。它是一种利用JavaScript与后台进行数据交互的技术。

Ajax的原理

Ajax的核心在于XMLHttpRequest对象，通过它可以发送HTTP请求、接收HTTP响应，而无需刷新整个页面。Ajax可以发送GET请求和POST请求，和表单提交非常相似，但是不会刷新整个页面。

Ajax的用途

实现表单提交
实现数据的异步提交
快速判断文本框中的数据是否合法
实现动态更新页面内容
实现动态数据加载

什么是JSON？

JSON是一种轻量级的数据交换格式，它以文本的形式传输数据，具有语法简洁、易于阅读和编写，易于机器解析和生成的特点。

JSON的结构

JSON的结构为键值对的形式，由大括号{}包裹，键值对之间用逗号隔开，键和值之间用冒号隔开。

// JSON数据示例
{
    "name": "张三",
    "age": 23,
    "gender": "男"
}

Ajax+JSON实现异步请求示例

HTML页面代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Ajax+JSON实现异步请求示例</title>
</head>
<body>
    <div id="content"></div>
    <script src="js/myAjax.js"></script>
    <script>
        var url = 'data/data.json';
        myAjax(url, function(data){
            var content = document.getElementById('content');
            var message = '';
            for(var key in data){
                message += key + '：' + data[key] + '<br />';
            }
            content.innerHTML = message;
        });
    </script>
</body>
</html>

JavaScript代码（myAjax.js文件内容）

function myAjax(url, callback){
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            callback(JSON.parse(xhr.responseText));
        }
    };
    xhr.open('GET', url, true);
    xhr.send();
}

Ajax+JSON实现异步提交示例

HTML页面代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Ajax+JSON实现异步提交示例</title>
</head>
<body>
    <form id="login-form" action="" method="post">
        <input type="text" id="username" name="username" placeholder="请输入用户名">
        <input type="password" id="password" name="password" placeholder="请输入密码">
        <button type="button" id="submit-btn">登录</button>
    </form>
    <script src="js/myAjax.js"></script>
    <script>
        var btn = document.getElementById('submit-btn');
        var form = document.getElementById('login-form');
        btn.onclick = function(){
            var username = document.getElementById('username').value;
            var password = document.getElementById('password').value;
            var data = {
                "username": username,
                "password": password
            };
            myAjax('data.php', function(response){
                console.log(response);
            }, JSON.stringify(data), 'post');
        };
    </script>
</body>
</html>

PHP代码（data.php文件内容）

<?php
header('Content-type: application/json;charset=utf-8');
if($_SERVER['REQUEST_METHOD'] === 'POST'){
    $data = json_decode(file_get_contents('php://input'), true);
    $username = $data['username'];
    $password = $data['password'];
    if($username === 'admin' && $password === '123456'){
        $result = array(
            'code' => 0,
            'msg' => '登录成功'
        );
    }else{
        $result = array(
            'code' => 1,
            'msg' => '用户名或密码错误'
        );
    }
    echo json_encode($result);
}
?>

至此，两条示例说明已经讲解完毕，希望对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Ajax与JSON的一些学习总结 - Python技术站