菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育

标题: 康利20221201Ajax03 [打印本页]
作者: 智商不在服务区    时间: 2022-12-1 23:34
标题: 康利20221201Ajax03
一、学习内容：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./ajax.js"></script>
</head>

<body>
    <input type="text" id="ipt">
    <button id="searBtn">搜索</button>
    <button id="addBtn">新增</button>
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>电话</th>
            </tr>
        </thead>
        <tbody id="tbody"></tbody>
    </table>


    <script>
        const ipt = document.querySelector('#ipt');
        const searBtn = document.querySelector('#searBtn');
        const addBtn = document.querySelector('#addBtn');
        const tbody = document.querySelector('#tbody');

        // 查询
        // 调用自己封装的ajax的get请求
        searBtn.addEventListener('click', function () {

            $.post('http://121.89.216.9/show', `id=${ipt.value}`, res => {
                let resDate = JSON.parse(res).data;
                console.log(resDate);
                // 渲染到页面
                let html =
                        `<tr>
                            <td>${resDate.id}</td>
                            <td>${resDate.name}</td>
                            <td>${resDate.age}</td>
                            <td>${resDate.sex}</td>
                            <td>${resDate.tel}</td>
                            <td><button class="edit">编辑</button><button class="del">删除</button></td>
                        </tr>`;
                tbody.innerHTML = html;
            })
        });
        // console.log($);
    </script>
</body>

</html>






欢迎光临 菁英数字科技（猩码）-猩码学苑-专注软件开发人才菁英教育 (http://www.xingmaxueyuan.com/) Powered by Discuz! X3.4