Day01-Ajax

最新推荐文章于 2024-07-09 15:51:39 发布
最新推荐文章于 2024-07-09 15:51:39 发布
阅读量244 收藏
点赞数
文章标签： ajax 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Spirs/article/details/135168538
版权

一.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>
</head>

<body>

    <table>
        <tr>
            <th>id</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>

        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

    <script>
        var data = [
            {
                "id": "0001",
                "name": "张三",
                "age": 18,
                "gender": "男"
            },
            {
                "id": "0002",
                "name": "李四",
                "age": 20,
                "gender": "女"
            },
            {
                "id": "0003",
                "name": "王五",
                "age": 18,
                "gender": "男"
            }
        ]

        console.log(data);

        // 将数组对象形式的数据转换为 json 格式
        var dataStr = JSON.stringify(data);
        console.log(dataStr);

        // 将 json 格式的数据转换为数组对象形式
        var data2 = JSON.parse(dataStr);
        console.log(data2);


        var table = document.querySelector("table");
        data2.forEach(function (value, index) {
            table.innerHTML += `<tr>
                                    <td>${value.id}</td>
                                    <td>${value.name}</td>
                                    <td>${value.age}</td>
                                    <td>${value.gender}</td>
                                </tr>`
        })

    </script>

</body>

</html>

二.Ajax使用

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>

        // 1.创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();

        // 2.Ajax向服务器发起请求  open("请求方式","请求地址")
        xhr.open("GET", URL);
        xhr.open("POST", URL);

        // 3.设置请求头

        // GET请求不需要设置请求头

        // post请求需要设置请求头
        // 默认格式 （窗体格式）    ?userName=1234&psd=abcd
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        // json格式
        xhr.setRequestHeader("Content-Type", "application/json");

        // 4.发送请求
        // get的一般不用send
        xhr.send(null);
        // post方法携带传递信息
        xhr.send(content);
        // name="田鹏鹏"&age=18
        // {"name":"田鹏鹏","age":18}

        // 5.获取响应，监听请求状态的改变
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                console.log("请求完成");

                // 完善的判断信息
                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                    console.log("请求成功");

                    // 拿到响应信息
                    console.log(xhr.response);
                    // 响应正文
                    console.log(xhr.responseText);

                    // ... 

                    var data = JSON.parse(xhr.responseText);

                    // ... 
                }
            }
        }

        
    </script>

</body>

</html>

三.get请求

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <input type="text"><button class="search">搜索</button><button>添加</button>

    <table border="1" cellspacing="0" cellpadding="10">
        <tr>
            <th>班级</th>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>爱好</th>
            <th>手机号</th>
            <th>地址</th>
            <th>备注</th>
            <th>日期</th>
            <th>操作</th>
        </tr>
    </table>

    <script>

        // 获取table
        var table = document.querySelector("table");
        // 获取搜索框
        var search = document.querySelector("input");
        // 获取搜索按钮
        var sbtn = document.querySelector(".search");

        var data;
        sbtn.onclick = function () {
            if (search.value) {
                data = search.value;
            } else {
                data = "";
            }

            table.innerHTML = `<tr>
                                <th>班级</th>
                                <th>学号</th>
                                <th>姓名</th>
                                <th>性别</th>
                                <th>年龄</th>
                                <th>爱好</th>
                                <th>手机号</th>
                                <th>地址</th>
                                <th>备注</th>
                                <th>日期</th>
                                <th>操作</th>
                            </tr>`;

            // 1.创建 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();

            // 2.发起请求 open()
            xhr.open("GET", "http://localhost:3008/api/student/getStudent?id=" + data);

            // 3.设置请求头

            // 4.发送请求 send()
            xhr.send();

            // 5.监听状态改变 onreadystatechange()
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                        console.log(xhr.responseText);      // json
                        var data = JSON.parse(xhr.responseText);
                        console.log(data);

                        data.forEach(function (value) {
                            table.innerHTML += `<tr>
                                        <td>${value.clazz}</td>
                                        <td>${value.id}</td>
                                        <td>${value.name}</td>
                                        <td>${value.gender}</td>
                                        <td>${value.age}</td>
                                        <td>${value.hobby}</td>
                                        <td>${value.tel}</td>
                                        <td>${value.address}</td>
                                        <td>${value.remark}</td>
                                        <td>${value.date}</td>
                                        <td>
                                            <button>编辑</button>
                                            <button>删除</button>
                                        </td>
                                    </tr>`
                        })
                    }
                }
            }
        }



    </script>

</body>

</html>

四.post请求

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./05-ajax封装.js"></script>
</head>

<body>

    <script>

        // // 1.创建 XMLHttpRequest 对象
        // var xhr = new XMLHttpRequest();

        // // 2.发起请求 open()
        // xhr.open("POST", "http://localhost:3008/api/student/addStudent");

        // // 3.设置请求头
        // // 窗体格式  "?name='张三'&age=18"
        // // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

        // xhr.setRequestHeader("Content-Type", "application/json");

        // // 4.发送请求 send()
        // // 必传参数： clazz班级 name 姓名  gender 性别 age 年龄 tel 电话 address 地址信息 remark 备注信息
        // // var data = "clazz='火花239'&name='丁方园'&age=23&tel=13888888888&address='兰考'&remark='游戏大神'"

        // var data = [
        //     {
        //         calzz: "火花239",
        //         name: "胡定海",
        //         age: 60,
        //         tel: 13666666666,
        //         address: "信阳",
        //         remark: "信阳彭于晏"
        //     }
        // ]
        // xhr.send(JSON.stringify(data));

        // // 5.监听 
        // xhr.onreadystatechange = function () {
        //     if (xhr.readyState === 4) {
        //         if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        //             console.log(xhr.response);
        //         }
        //     }
        // }

        var data = {
            calzz: "火花239",
            name: "侯志强",
            age: 18,
            tel: 13666666666,
            address: "信阳",
            remark: "信阳彭于晏"
        }
        postData(data, "http://localhost:3008/api/student/addStudent", function (xhr) {
            console.log(xhr.response);
        })

    </script>

</body>

</html>

五.Ajax封装

// 封装get请求
function getData(data, url, fun) {
    // 1.创建对象
    var xhr = new XMLHttpRequest();
    if (!data.includes("=")) {
        data = formData(data);
    }
    url += "?" + data;
    // 2.发起请求
    xhr.open("GET", url);

    // 3.发送请求
    xhr.send();

    // 4.监听状态改变
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                console.log(xhr.responseText);
                fun(xhr);
            }
        }
    }
}


// 数据转换为窗体格式
function formData(data) {
    var arr = [];
    for (var key in data) {
        arr.push(key + "=" + data[key]);
    }
    data = arr.join("&");
    return data;
}


// 封装 post 请求
function postData(data, url, fun) {
    // 1.创建对象
    var xhr = new XMLHttpRequest();
    // 2.发起请求
    xhr.open("POST", url);
    // 设置请求头
    if (data instanceof Object) {
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.send(JSON.stringify(data));
    } else {
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(data);
    }
    // 4.监听状态改变
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
                console.log(xhr.responseText);
                fun(xhr);
            }
        }
    }
}

前端拓海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ajax-Day01
qq_43375584的博客
05-03 1014
什么是ajax Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法， 包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3]  使用Aj
AJAX day01.md
10-27
AJAX day01.md
AJAX-day01-AJAX入门
来自计科大一萌新的编程记录本
07-15 525
学习目标：1.了解Ajax的概念 2.学会使用axios 3.了解http协议和接口文档
AJAX-day02-AJAX原理
来自计科大一萌新的编程记录本
07-20 537
学习目标：1.了解Ajax原理 2.学会使用XMLHttpRequest 和Promise并能封装简易的axios
Day03-01：Ajax-介绍
m0_63464979的博客
07-03 396
1.Ajax1.概念：Asynchronous JavaScript And XML，异步的JavaScript和XML。2.作用：1.数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。2.异步交互：可以在不重新加载整个页面的情况下，与服务器叫喊数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。​ ----------请求----------》
Web前端105天-day39-AJAX
qq_52810836的博客
12-10 224
Web前端105天day39-ajax练习
Day03-01：Ajax-Axios2-案例
m0_63464979的博客
07-03 172
1.数据准备的url：http://yapi.smart-xwork.cn/mock/169327/empist。2.在页面加载完成后，自动发送异步请求，加载数据，渲染展示页面(性别：1代表男，2代表女)。基于Vue及Axios完成数据的动态加载展示。
Web前端105天-day38-AJAX
qq_52810836的博客
12-09 229
web前端105天-day38-Ajax02
day35-Postman/ajax
weixin_63713552的博客
07-13 1773
1.postman2.ajax 1.1 定义：postman用于测试http协议接口，无论是开发还是测试人员1.2 Servlet中的doGet（）/daPost（）（1）创建servlet，配置web.xml（2）测试1：浏览器测试：输出doGet。。。；说明浏览器输入url地址的时候，只能调用servlet中的doGet（3）测试2
【漏洞复现】（1day）宏景-ajax-sql注入exp与漏洞复现
weixin_56297026的博客
12-14 665
网络安全 渗透测试 sql注入 宏景-ajax 漏洞复现
day03-前端(ajax&json).zip
10-07
在"day03-前端(ajax&json)"的学习中，你将有机会实践如何使用AJAX进行异步数据请求，以及如何处理和展示JSON数据。通过编写AJAX请求，你可以与服务器进行实时交互，例如动态加载数据、提交表单等。同时，了解如何...
ajax-day01.rar_ajax_union1de
09-23
**Ajax（Asynchronous JavaScript and XML）**是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新。这一技术的核心在于JavaScript，XML则...
day08-HTTP&Tomcat&Servlet
10-28
* Ajax、Vue、ElementUI：都是前端技术栈，用于构建响应式用户界面。 JavaWeb 技术栈包括了 B/S 架构、静态资源、动态资源、数据库、HTTP 协议、Web 服务器、Servlet 等几个方面，是 Java 技术来解决相关 web ...
Ajax 异步请求
最新发布
weixin_51644244的博客
07-09 747
客户端发送请求后，而我们的服务端响应一个页面|地址。而ajax响应的不在是地址或网页，而是==一个数据==使用ajax必须具备:1. 通过事件触发向服务器发送请求2. 服务器响应的一定是数据。不在是地址或网页(在练习过程中，例如查询到一个带有学生信息的 list 集合 在往前端传的时候首先要将其转成 json 数据格式JSON（JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON。
Ajax与Fetch API在Web开发中的性能、用法与未来趋势比较
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
07-07 987
headers: {},})Ajax和Fetch各有优缺点，适用于不同的场景。Ajax作为一种传统的技术，在旧的应用和环境中仍然广泛使用，并且具有较高的灵活性。而Fetch作为现代JavaScript中的API，提供了更简洁、功能更强大的方式来处理网络请求，特别适合使用在现代JavaScript应用中。开发者可以根据实际需求和场景选择合适的技术。
AJAX-个人版-思路步骤整理版
weixin_65644655的博客
07-06 905
前置知识：老式的web创建工程方法就是创建项目然后添加web工件，然后添加lib依赖如：tomcat,servlet，等。 传统请求 对于传统请求操作：整体流程也就是创建静态页面， <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>演示传统请求，以及传统请求的缺点</title> </head> <body>
Vuex 核心揭秘：打造高效前端状态库
a3098448071的博客
07-03 1137
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
js-day01培训内容1
08-08
（3）解释性 每次运行JS代码时，得需要将原代码一行一行的解释执行 相对编译型语言（例如：Java、C++）执行速度相对较慢 （4）基于浏览器的动态交互网页技

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值