Ajax初识

最新推荐文章于 2024-08-31 15:57:06 发布

一只程序耀

最新推荐文章于 2024-08-31 15:57:06 发布

阅读量37

点赞数

分类专栏：前端文章标签： ajax

本文链接：https://blog.csdn.net/qq_51017451/article/details/132569789

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

● 什么是Ajax？
○ 1、Ajax（Asynchronous javaScript and XML）异步的JavaScript 和XML
○ 2、Ajax不是新的编程语言，而是一种使用现有标准的新方法
○ 3、Ajax最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
○ 4、Ajax可以是网页实现异步更新
○ 5、Ajax不需要任何浏览器插件
● jQuery load() 方法
○ load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

   $('.box').load('text.txt')

● $.ajax()
● ajax() 方法用于执行 AJAX（异步 HTTP）请求。
● 所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
● 现阶段要记住的参数，url请求的地址，type请求方式，success成功的回调函数。

<!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>
    <button class="btn">按钮</button>

    <table border="1" cellspacing="0">
        <tr>
            <td>id</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>学校</td>
            <td>手机号</td>
            <td>身份证号</td>
            <td>操作</td>
        </tr>
    </table>
</body>
<script src="../common/jquery-3.4.1.min.js"></script>
<script>
    $('.btn').click(function () {
        $.ajax({
            //请求地址
            url: "http://192.168.3.218:8080/test/g?num=5",
            //请求方式
            type: "get",
            //成功的回调函数
            success: function (date) {

                for (let index = 0; index < date.length; index++) {
                    var trjq = $('<tr></tr>')
                    var tdjq1 = $('<td></td>')
                    var tdjq2 = $('<td></td>')
                    var tdjq3 = $('<td></td>')
                    var tdjq4 = $('<td></td>')
                    var tdjq5 = $('<td></td>')
                    var tdjq6 = $('<td></td>')

                    var tdjq7 = $(
                        '<td><button btnId=' + date[index].id + '>查看详情</button></td>'
                    )
                    tdjq1.html(date[index].id)
                    tdjq2.html(date[index].name)
                    tdjq3.html(date[index].age)
                    tdjq4.html(date[index].school)
                    tdjq5.html(date[index].phone)
                    tdjq6.html(date[index].idCard)
                    trjq.append(tdjq1, tdjq2, tdjq3, tdjq4, tdjq5, tdjq6, tdjq7)
                    $('table').append(trjq)
                }
            }
        })
    })


    $('table').on("click", 'button', function () {
        console.log()
        $.ajax({
            url: "http://192.168.3.218:8080/test/getDetail?num=" + $(this).attr('btnid'),
            type: "get",
            success: function (res) {
                alert(`id=${res.id},姓名=${res.name},年龄=${res.school},学校=${res.school},手机号=${res.phone},身份证号=${res.idCard}`)
                for (const key in res) {
                    console.log(key + ":" + res[key])
                }
            }
        })
    })
</script>

</html>

● JSON
● (1) 什么是JSON？
○ JSON: JavaScript Object Notation(JavaScript 对象表示法)
○ JSON 是存储和交换文本信息的语法。类似 XML。
○ JSON 比 XML 更小、更快，更易解析。
○ JSON 是轻量级的文本数据交换格式
○ 创建JSON对象

var JSONObject= {
"name":"菜鸟教程", 
"url":"www.runoob.com", 
"slogan":"学的不仅是技术，更是梦想！"
 };

● 属性名加引号，属性值
● JSON 属性值值可以是：数字（整数或浮点数）、字符串（在双引号中）、逻辑值（true 或 false）、数组（在中括号中）、对象（在大括号中）、null
● 创建JSON对象数组

var sites = [ 
{ "name":"runoob" , "url":"www.runoob.com" }, 
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" } 
];

● 访问方法sites[0].name;
● 方法 JSON.parse()
○ JSON 通常用于与服务端交换数据。在接收服务器数据时一般是字符串。
○ 我们可以使用 JSON.parse(字符串) 方法将数据转换为 JavaScript 对象。
● JSON.stringify()
○ JSON 通常用于与服务端交换数据。
○ 在向服务器发送数据时一般是字符串。
○ 我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串

一只程序耀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax初识

● JSON 属性值值可以是：数字（整数或浮点数）、字符串（在双引号中）、逻辑值（true 或 false）、数组（在中括号中）、对象（在大括号中）、null。● 所有的 jQuery AJAX 方法都使用 ajax() 方法。○ 3、Ajax最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。○ 我们可以使用 JSON.parse(字符串) 方法将数据转换为 JavaScript 对象。○ load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
复制链接

扫一扫

专栏目录