ajax的基础获取到表格内容第二种获取表格数据 $.ajax（{ }）第三种获取表格内容 $.get(“ “, function( ) { }

最新推荐文章于 2023-04-23 16:30:13 发布

大坤...

最新推荐文章于 2023-04-23 16:30:13 发布

阅读量1k

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/red_HTML/article/details/126341599

版权

Ajax特点:

优点: 可以无需刷新页面，与服务器进行通信· 允许依据用户事件来更新部分页面内容

缺点: 没有浏览历史，不能回退·存在跨域问题(同源) · SEO不友好r(搜索引擎优化，对爬虫不友好)

第一种：四步

(1)创建Ajax对象(XmlHttpRequest)
var xm7http=new XMLHttpRequest();
(2)判断数据：的传输方式(get/post)，打开连接open()
xmlhttp.open("get" , "http: / /127.0.0.1:8089" ,true);
(3)获得响应：如需获得来自服务器的响应，请使用XMLHttpRequest 对象的responseText或responseXML属性。

(4)发送send()

代码：

<!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>
</head>

<body>
    <input type="button" value="点击提交" id="btn1">
    <div id="div">

    </div>
    <script>
        document.querySelector("#btn1").onclick = function() {
            // 第一步创建XMLHttpRequest对象
            var xmlhttp = new XMLHttpRequest()
                // 告诉浏览器的请求是什么，以及请求发送到哪里
            xmlhttp.open("get", "xml/student.xml", true)
                // 第三步：
            xmlhttp.onreadystatechange = function() {
                // 做数据处理
                // console.log(xmlhttp.responseText);
                document.querySelector("#div").innerHTML = xmlhttp.responseText
                var table = "<table><tr><th>学号</th><th>姓名</th><th>年龄</th><tr></table>"
            }
            xmlhttp.send()
                // xmlhttp.onload
        }
    </script>
</body>

</html>

获取到表格内容

<!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>
</head>

<body>
    <input type="button" value="anniu" id="btn">
    <div></div>

    <script>
        document.querySelector("#btn").onclick = function() {
            // 创建 xml对象
            var xmlhttp = new XMLHttpRequest()
                // 第二步 告知浏览器的请求方式以及请求路径
            xmlhttp.open("get", "xml/student.json", true)
                // 第三步设置响应式服务器端数据处理
            xmlhttp.onreadystatechange = function() {
                    // document.querySelector("div").innerHTML = xmlhttp.responseText
                    // 我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
                    // responseText在一个请求被发送后，从服务器端返回文本。
                    var students = JSON.parse(xmlhttp.responseText)
                        // console.log(students[0].stuID)
                    var table = "<table border = '1' borderColor = 'red'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>"
                    for (var i = 0; i < students.length; i++) {
                        var stuid = students[i].stuID
                        var stuname = students[i].stuName
                        var stuAge = students[i].stuAge
                        table += "<tr><td>" + stuid + "</td><td>" + stuname + "</td><td>" + stuAge + "</td></tr>"
                    }
                    table += "</table>"
                    document.querySelector("div").innerHTML = table
                }
                // 四步
            xmlhttp.send()
        }
    </script>
</body>

</html>

第二种获取表格数据 $.ajax（{ }）

<!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="../../jquery基础/0812杨杜坤/jquery-3.6.0.min.js"></script>
</head>

<body>
    <input type="button" id="btn1" value="button">
    <div>
        <script>
            $(function() {
                $("#btn1").click(function() {
                    $.ajax({
                        type: "get",
                        url: "xml/student.json",
                        async: true,
                        dataType: "text",
                        success: function(data) {
                            // console.log(data)
                            var student = JSON.parse(data)
                            var table = "<table border='1' borderColor='red'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>"
                            for (var i = 0; i < student.length; i++) {
                                console.log(student[i].stuID) // 1001 1002 1003 1004 1005
                                var stuid = student[i].stuID
                                var stuname = student[i].stuName
                                var stuage = student[i].stuAge
                                table += "<tr><td>" + stuid + "</td><td>" + stuname + "</td><td>" + stuage + "</td></tr>"
                            }
                            table += "</table>"
                            document.querySelector("div").innerHTML = table
                        }
                    })
                })
            })
        </script>
    </div>

</body>

</html>

第三种获取表格内容 $.get(" ", function( ) { }

<!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="../../jquery基础/0811杨杜坤/jquery-3.6.0.min.js"></script>
</head>

<body>
    <input type="button" value="ajax" id="btn1">
    <div>

    </div>
    <script>
        $(function() {
            $("#btn1").click(function() {
                $.get("xml/student.json", function(data) {
                    // console.log(data)
                    // var student = JSON.parse(data)
                    var table = "<table border='1' borderColor='red'><tr><th>学号</th><th>姓名</th><th>年龄</th></tr>"
                    for (var i = 0; i < data.length; i++) {
                        // console.log(student[i].stuID) // 1001 1002 1003 1004 1005
                        var stuid = data[i].stuID
                        var stuname = data[i].stuName
                        var stuage = data[i].stuAge
                        table += "<tr><td>" + stuid + "</td><td>" + stuname + "</td><td>" + stuage + "</td></tr>"
                    }
                    table += "</table>"
                    document.querySelector("div").innerHTML = table
                })
            })
        })
    </script>
</body>

</html>

案例

<!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="jquery-3.6.0.min.js"></script>
    <style>
        * {
            list-style: none;
        }
        
        img {
            float: left;
            width: 100px;
            height: 100px;
        }
        
        div {
            width: 300px;
            height: 1000px;
            border: 1px solid red;
        }
        
        p {
            line-height: 20px;
        }
    </style>
</head>

<body>
    <input type="button" value="button" id="btn">
    <div></div>
    <script>
        $(function() {
            $("#btn").click(function() {
                $.get("xml/data.json", function(data) {
                    // console.log(data)
                    var img = ''
                    for (var i = 0; i < data.length; i++) {
                        img += "<img src=" + data[i].img + ">" + "<p>" + data[i].title + "</p>" + "<br>" + "<p>" + "价格：" + data[i].price + "</p>"
                    }
                    document.querySelector("div").innerHTML = img
                })
            })
        })
    </script>
</body>

</html>

post( )

querystring.parse() 方法用于将url查询字符串解析为包含查询url的键和对值的对象

大坤...

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
ajax的基础获取到表格内容第二种获取表格数据 $.ajax（{ }）第三种获取表格内容 $.get(“ “, function( ) { }

ajax的基础获取到表格内容第二种获取表格数据 $.ajax（{ }）第三种获取表格内容 $.get(" ", function( ) { }
复制链接

扫一扫