ajax需要的是json的数据格式

最新推荐文章于 2021-08-06 15:10:11 发布

江呱呱

最新推荐文章于 2021-08-06 15:10:11 发布

阅读量229

点赞数

分类专栏： js 文章标签： js php

本文链接：https://blog.csdn.net/weixin_46500485/article/details/108609939

版权

js 专栏收录该内容

76 篇文章 2 订阅

订阅专栏

ajax需要的是json的数据格式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-align: center;
        }
        
        form {
            width: 400px;
            height: 150px;
            margin: 0 auto;
        }
        
        .item {
            display: flex;
            height: 50px;
            align-items: center;
        }
        
        .item label {
            flex: 2;
        }
        
        .item input {
            flex: 4;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <td>用户名</td>
                <td>密码</td>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

    <h2 id="h2"></h2>
    <button id="sendAJAXBtn">点我发送AJAX请求</button>
    <script>
        // AJAX: Asynchronous Javascript And XML (异步的JS和XML)
        // XML: 可拓展标记语言 用于前后端传递数据 用于后端的配置文件 现在因为前后端之间传递数据用的都是JSON所以基本不怎么用XML来传递数据
        // 异步发送一个HTTP请求，去后端获取数据，带回给前端浏览器，让浏览器处理。
        // AJAX不是一门技术，是一整套技术体系 包含HTML、CSS、DOM、BOM、JSON等

        // AJAX兼容性很好，兼容到IE5

        // 获取元素
        let sendAJAXBtn = document.getElementById("sendAJAXBtn");
        let tbody = document.querySelector("tbody");
        let h2 = document.getElementById("h2");
        // 绑定事件
        sendAJAXBtn.onclick = function() {
            //创建ajax对象
            var xhr = new XMLHttpRequest();
            //配置ajax对象
            xhr.open('get', 'http://localhost/day2(http)/03.php', true);
            //发送请求
            xhr.send();
            //监听
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    try {
                        console.log(JSON.parse(xhr.responseText));
                        var object = JSON.parse(xhr.responseText);
                        object.data.forEach(item => {
                            tbody.innerHTML += `
                                <tr><td>${item.username}</td><td>${item.password}</td></tr>
                            `;
                        })
                    } catch (e) {
                        console.log(e);
                    }
                }
            }
            console.log(1);
        }


        // 接口文档 
        // 包含的信息通常有:
        /*
            url: http://localhost/03.php
            type: get
            data:
                username 用户名  string  8~12
                password 密码    string  8~16
            responseData:
                {
                    error: 0 成功 1 服务器故障 2 数据库故障 3 ...
                    data: 返回信息
                }
         */
    </script>
</body>

</html>

<?php
    header("content-type:text/html;charset=utf-8");
    //连接数据库
    mysql_connect("localhost","root","root");
    //选择数据库
    mysql_select_db("gz2006");
    //sql语句
    $sql = "SELECT * FROM user";
    //执行sql语句
    $result = mysql_query($sql);
    //新建一个空数组
    $arr=array();
    //通过 将数据一条一条放入数组
    while($row=mysql_fetch_array($result)){
        array_push($arr,$row);
    }
    //生成一个对象
    $arr1=array("error"=>0,"data"=>$arr);
    echo json_encode($arr1);
    //关闭数据库
    mysql_close();
?>

江呱呱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax需要的是json的数据格式

ajax需要的是json的数据格式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
复制链接

扫一扫

专栏目录