26_ajax

news2025/4/3 16:02:11

目录

了解

接口

前后端交互

一、安装服务器环境 nodejs

ajax发起请求

渲染响应结果

get方式传递参数

post方式传递参数

封装ajax_上

封装ajax下


了解

清楚前后端交互就可以写一些后端代码了。小项目

现在写项目开发的时候都是前后端分离

之前都没有前端这个东西,2014年后有了框架,划分越来越明显。

什么叫前后端分离?

我写前面的一个网页项目叫桂花香,如果我不把桂花香这个项目代码发给你,那么你就看不到我的页面。因为没有后端服务器。

把前端代码放后端京东.com服务器上,这样大家都能请求访问。

那后端就充当服务器一个角色?后端能做的事很多,主要对数据库增删改查

这些数据都是后端返回的,不是你硬写 写死上去的。(比如我刷新抖音对应热搜就变了,刷新的时候后端再查 返回过来,前端再渲染)

推荐的东西/页面会变,这些数据都是后端去查询数据库返回到前端,前端拿到数据渲染

咋渲染到页面上?后面讲

现在的项目都是前后端分离

Fetch/XHR代表接口

接口

如果能够对接口发起请求呢?如何拿到这些数据。就是用到前后端交互

前后端交互

后端可以返回前端所需要的数据

需求:是咱们前端如何获取到这些数据 并渲染到页面上

解决:前后端交互的重点 ajax

本章讲ajax如何发起请求,获取后端数据,做前后端交互

一、安装服务器环境 nodejs

要交互就要安装服务器环境。

前端要调后端的接口。发起ajax,但是要请求服务器得去先安装服务器的环境。

nodejs 是运行服务器程序的基础,推荐16比较稳定

  • 环境安装

    1、安装包 下载地址:Index of /download/release/latest-v16.x/

    • 双击安装即可

    • 正常下一步,可以选择你想要安装的盘符目录,如果你电脑上安全软件,推荐安装到C盘

      直接一直下一步 不需要修改盘符。。。自动的配置环境变量

  • 测试是否安装成功

win + R 打开 dos命令窗口  输入命令

node -v
或者
node --version

如果出现版本号 就代表安装成功
如果出现“node  不是内部外部命令,,,” 没安装成功   卸载重装//或者添加环境变量看看

二、ajax前后端交互

前后端是分离的!!!

交互通过谁:ajax

前端:前端完成自己的静态页面,,页面中有很多数据,数据是后端返回的,咱们需要做的事情就是请求到后端返回的数据,,如何请求后端数据,,用到ajax

ajax

ajax全名是 async(异步) javascript and xml

ajax是前后端交互的能力

也就是我们客户端给服务器发送数据的工具,也可以接收响应的数据

这是一个默认 异步的执行机制 (ajax发起网络请求 请求是需要时间 异步的)

 01-异步说明

快速判断:需要时间去等就是异步的

    <script>
        // 同步:排队执行  从前到后执行(比如先打哈哈哈等1s之后再打印嘿嘿嘿)
        // 异步:同步的先执行,异步的后执行

        setTimeout(()=>{//定时器就是一个异步操作
            console.log("哈哈哈");
        },1)

        console.log("嘿嘿嘿");//同步的先打印
    </script>

ajax 优势

1、不需要第三方库 原生js直接使用

2、用户体验好(异步) 不需要刷新页面就可以更新数据,局部刷新(比如就刷新热搜排名那一块)

3、减轻服务器负担

缺点:

1、搜索引擎支排名持度不够(seo) 因为数据都不在页面上,数据都是从服务器上来的 搜索引擎搜索不到(底下来的)。

ajax发起请求

接口地址。用到服务器。

启动服务器

ajax发起请求


    <script>
        let btn = document.querySelector("button");
        btn.onclick=function(){
          let xhr = new XMLHttpRequest();//请求对象
          xhr.open("get","http://localhost:8888/test/first"); //请求地址(接口)
          xhr.send();   

        }
    </script>
<body>
    <button>发起请求</button>
    <script>
        let btn = document.querySelector("button");//找到网页按钮
        btn.onclick=function(){
            // 第一步- 创建一个xml对象
            //XMLHttpRequest()是一个构造函数需要new对象
          let xhr = new XMLHttpRequest();
            // 第二步- 配置xhr对象
            //-请求方式get/post  //-请求地址
          xhr.open("get","http://localhost:8888/test/first"); //http://localhost:8888/test/first 接口
            // 第三步- 发起网络请求
          xhr.send();   

        }
    </script>
</body>

浏览器查看发起的请求


通过浏览器调试查看我们发起的请求
打开控制台 -->网络(network)--> fetch/xhr 

改代码post/放弃请求,不成功? 因为接口文档用的get

不改代码/模拟一下


如何知道请求的地址  和 请求的方式呢??
查看接口文档 (接口文档都是后端提供的)

渲染响应结果

处理返回的数据渲染到页面上


    <script>
        let btn = document.querySelector("button");//获取按钮
        let h1 = document.querySelector("h1");//渲染到h1
        btn.onclick = function () {
            let xhr = new XMLHttpRequest();//接口请求对象
            xhr.open("get", "http://localhost:8888/test/first"); //接口地址
            xhr.send();

            xhr.onload = function () {
                h1.innerHTML = xhr.responseText;//获取响应文本
            }
        }
    </script>
</body>
<body>
    <button>发起请求</button>
    <h1></h1>
    <script>
        let btn = document.querySelector("button");
        let h1 = document.querySelector("h1");
        btn.onclick = function () {
            let xhr = new XMLHttpRequest();
            xhr.open("get", "http://localhost:8888/test/first"); 
            xhr.send();
            // 4-处理响应数据(渲染到页面上)
            //   响应数据两种情况:纯字符串/json字符串
            xhr.onload = function () {
                h1.innerHTML = xhr.responseText;
                //console.log(xhr.responseText);//打印到控制台上看获取到没有
            }
        }
    </script>
</body>

json

打印到控制台的是一堆json格式字符串,不是一个正常对象。

想把message渲染,得把json格式的字符串处理成对象。


<head>

</head>
<body>
    <button>发起请求</button>
    <h1></h1>

    <script>
         let btn = document.querySelector("button");
        let h1 = document.querySelector("h1");
        btn.onclick =function(){
            let xhr = new XMLHttpRequest();
            xhr.open("get","http://localhost:8888/test/second");
            xhr.send();
            xhr.onload = function(){
                console.log(xhr.responseText);
                // 我们在进行前后端交互时 响应的数据发部分都是json格式的字符串
                // 获取到之后需要通过JSON.parse()方法  把json字符串转化为一个真正的对象
               h1.innerHTML = JSON.parse(xhr.responseText).message  //把message渲染到页面中
            }
        }
    </script>
</body>

接口文档说

get方式传递参数

?是拼接参数,提交给后端查询参数。

get方式都是以?这种形式去拼接的。



<body>
    <input type="text" placeholder="姓名">
    <input type="text" placeholder="年龄">
    <button>发起请求</button>
    <h1></h1>
    <script>
        //js获取标签
        let btn = document.querySelector("button");
        let h1 = document.querySelector("h1");
        let ipts = document.querySelectorAll("input");//伪数组
        btn.onclick = function () {
            // 1-创建xml对象
            let xhr = new XMLHttpRequest()
            // 2-设置xml对象
            //  get请求方式携带数据  数据是放到路径上的
            //  格式:url?key1=value&key2=value&key3=value 
                // (eg:http:http://localhost:8888/test/third?name='xx'&age='xx')
                // key 参数名(字段名)
                // value 参数值 (字段值)
            xhr.open("get",`http://localhost:8888/test/thirdname=${ipts[0].value}&age=${ipts[1].value}`);
            // 3-发起请求
            xhr.send();
            // 4- 处理响应结果
            xhr.onload = function(){
                console.log(xhr.responseText);
            }
        }
    </script>
</body>

payload里边就是你传的参数,写啥传啥。

post方式传递参数

工作的时候铺完页面调静态接口

后面学了框架之后用别的去调接口。

参数都是用的魔发字符串动态${}


post请求接口时,必须设置请求头,添加一条请求头信息,这条信息是发送的数据的格式
比如:application/x-www-form-urlencoded
怎样添加  给xhr 对象添加请求头
语法:xhr.setRequestHeader("请求字段名","请求的值")
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")

        // 注意:post 方式
        // 1-必须设置请求头(发送前设置请求头)
        // 2-携带的数据不能在url地址里 而是通过send()携带数据
<body>
    <input type="text" placeholder="姓名">
    <input type="text" placeholder="年龄">
    <h1></h1>
    <button>发起请求</button>

    <script>

        let btn = document.querySelector("button");//获取
        let ipts = document.querySelectorAll("input");//获取
        let h1 = document.querySelector("h1");//获取
        btn.onclick=function(){
            // 1.xhr请求对象
            let xhr = new XMLHttpRequest()
            // 2-设
            xhr.open("post","http://localhost:8888/test/fourth")
            // 3-发
            let data = `name=${ipts[0].value}&age=${ipts[1].value}`;//参数
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//post设置请求头
            xhr.send(data); // post通过send传参给服务器!!!
            // 4.渲
            xhr.onload = function(){
              let data = JSON.parse(xhr.responseText);
              console.log(data);
              h1.innerHTML = `我的名字是${data.info.name}我的年龄是${data.info.age}`
            }
        }
    </script>
</body>

封装ajax_上

写项目就不用一直写发送请求。一个项目接口上百个。怎么办?

在开发过程中在多次使用的东西都封装成一个函数。多次去使用调用。

调用xml.send()就行了

<body>
    <input type="text" placeholder="姓名">
    <input type="text" placeholder="年龄">
    <button>发起请求</button>
    <script>
        let btn = document.querySelector("button");
        let ipts = document.querySelectorAll("input");
        //post
        btn.onclick = function () {
            let option = {//可变对象
                method:"post",
                url:"fourth",
                data:{
                    name:"jack",
                    age:18
                },
                header:"Content-type,application/x-www-form-urlencoded"
            }
            xhr(option);//调用
        }



        // 封装的网络请求函数
        // 可变:方式  地址  参数  请求头
        // 可变的  调用函数的时候传参!!! 传谁我就用谁!!

        function xhr(options){//option对象传过来
            let method = options.method || "get";//传过来的url 没传默认get
            let url = options.url;
           
            
            // get
            let data = formatData(options.data || {}); 
            if(method.toUpperCase()=="GET"&&data){
                url = url+data
            }

            // 1-创
            let xhr = new XMLHttpRequest();
            // 2-设
            xhr.open(method,`http://localhost:8888/test/${url}`)//方式可变 //地址可变
            // 3-发
            xhr.send();
            // 4-处理渲染
            xhr.onload = function(){

            }
        }

        // get希望传的是 ?name=jack&age=18  所以传来的参数进一步处理
        // 格式化data的函数
        function formatData(obj){
            let data = "";  // 保存保存处理好之后的数据
            for(let key in obj){
                data += `&${key}=${obj[key]}`
            }
            data = data.slice(1);//从下标为1开始截取到最后
           return data;
        }
    </script>
</body>
   // 封装的网络请求函数

        // 哪些是可变的  请求方式  请求地址  请求参数  请求头
        // 可变的  调用函数的时候传参!!! 传谁我就用谁!!
        function ajax(options){
            let method = options.method || "get";//如果你传了请求方式就用你传的 没传默认是get
            let url = options.url;
            let header = options.header || {"Content-Type":"application/x-www-form-urlencoded"}
            let type = options.dataType || "json"
           
            // ajax希望传的是 ?name=jack&age=18  所以传来的参数进一步处理
            let data = formatData(options.data || {}); 
            // data参数  get和post请求方式不一样  分情况讨论
            // get 方式在地址后边拼接  post方式是通过send(data) 发送的
            if(method.toUpperCase()=="GET"&&data){
                // foruth?name=jack&age=18
                url = url+"?"+data
            }

            // 1-创建xhr对象
            let xhr = new XMLHttpRequest();
            // 2-设置xhr对象
            xhr.open(method,`http://localhost:8888${url}`)
            for(let key in header){
                xhr.setRequestHeader(key,header[key]);
            }
            // 3- 发起请求
            // 分成两种情况   post请求的话 参数是通过send取发送的
            if(method.toUpperCase()=="POST" && data){
                xhr.send(data);
            }else{
                xhr.send();
            }
           
            // 4- 处理响应结果
            xhr.onload = function(){
                // 有可能是纯字符串  有可能是json字符串 (最常用的json串)
                let result;
                if(type=='json'){
                   result = JSON.parse(xhr.responseText)
                }else{
                   result = xhr.responseText
                }

                options.success(result)
            }
        }

        // 格式化data的函数
        function formatData(obj){
            let data = "";  // 保存保存处理好之后的数据
            for(let key in obj){
                data += `&${key}=${obj[key]}`
            }
            data = data.slice(1);//从下标为1开始截取到最后
           return data;
        }

封装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="./axios.js"></script>
</head>

<body>
    <input type="text" placeholder="姓名">
    <input type="text" placeholder="年龄">
    <button>get发起请求first</button>
    <button>get发起请求second</button>
    <button>post发起请求third</button>
    <script>
        let btn = document.querySelectorAll("button");
        let ipts = document.querySelectorAll("input");
        // 在哪调用  希望在哪拿到返回值的
        btn[0].onclick = function () {
            let option = {
                url:"first",
                dataType:"text",
                // 传一个回调函数
                success:(res)=>{
                    console.log(res);
                }
            }
            ajax(option);
        }

        btn[1].onclick=function(){
            let option = {
                url:"third",
                dataType:"json",
                data:{
                    name:"jack",
                    age:18
                },
                // 回调函数 
                // 就是把函数A(success)当作参数传递到函数B中
                // 在函数B中以形参的方式去调用
                success:(res)=>{
                    console.log(res);
                }
            }
            ajax(option)
        }
        btn[2].onclick=function(){
            let option = {
                url:"fourth",
                method:"post",
                data:{
                    name:"jack",
                    age:18
                },
                success:(res)=>{
                    console.log(res);
                }
            }
            ajax(option)
        }


     
    </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>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        ul{
            width: 1000px;
            border: 2px solid red;
            margin: 0 auto;
            background-color: #ccc;
            overflow: hidden;
        }
        li{
            float: left;
            width: 18%;
            margin-right: 2%;
            height: 300px;
            background-color: #fff;
            margin-bottom: 20px;
            border: 2px solid red;
            box-sizing: border-box;
        }
        img{
            width: 100%;
        }
    </style>
</head>
<body>
    <ul>
        
    </ul>
    <script src="./axios.js"></script>

    <script>
        let ul = document.querySelector("ul");
        let option = {
            url:"/goods/list",
            success:(res)=>{
                console.log(res.list);//数组
                // 数组里有多少对象  就希望有多少个li
                let data="";
                res.list.forEach(item => {
                    // console.log(item);
                   data+= `
                     <li>
                        <a href="#">
                            <img src="${item.img_big_logo}">
                            <h4>${item.title}</h4>
                            <p>${item.price}</p>
                        </a>
                    </li>
                    `                    
                });
                ul.innerHTML = data;
            }
        }
        ajax(option)
    </script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2324488.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Kafka中的消息是如何存储的?

大家好&#xff0c;我是锋哥。今天分享关于【Kafka中的消息是如何存储的&#xff1f;】面试题。希望对大家有帮助&#xff1b; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在 Kafka 中&#xff0c;消息是通过 日志&#xff08;Log&#xff09; 的方式进行存储的。…

Altium Designer——同时更改多个元素的属性(名称、网络标签、字符串标识)

右键要更改的其中一个对象&#xff0c;选择查找相似… 进入到筛选界面&#xff0c;就是选择你要多选的对象的共同特点&#xff08;名字、大小等等&#xff09;&#xff0c;我这里要更改的是网络标签&#xff0c;所以我选择Text设置为一样。 点击应用就是应用该筛选调节&#…

当模板方法模式遇上工厂模式:一道优雅的烹饪架构设计

当模板方法模式遇上工厂模式&#xff1a;一道优雅的烹饪架构设计 模式交响曲的实现模板方法模式搭建烹饪骨架&#xff08;抽象类&#xff09;具体菜品&#xff08;子类&#xff09; 工厂模式 模式协作的优势呈现扩展性演示运行时流程控制 完整代码 如果在学习 设计模式的过程中…

企业级知识库建设:自建与开源产品集成的全景解析 —— 产品经理、CTO 与 CDO 的深度对话

文章目录 一、引言二、主流产品与方案对比表三、自建方案 vs. 开源产品集成&#xff1a;技术路径对比3.1 自建方案3.2 开源产品集成方案 四、结论与个人观点 一、引言 在当今数据驱动的商业环境中&#xff0c;构建高质量的知识库已成为企业数字化转型的关键一环。本博客分别从…

vue3项目配置别名

vue3项目配置别名 src别名的配置TypeScript 编译配置如果出现/别名引入报找不到的问题 src别名的配置 在开发项目的时候文件与文件关系可能很复杂&#xff0c;因此我们需要给src文件夹配置一个别名&#xff01;&#xff01;&#xff01; // vite.config.ts import {defineCon…

[ C语言 ] | 从0到1?

目录 认识计算机语言 C语言 工欲善其事必先利其器 第一个C语言代码 这一些列 [ C语言 ] &#xff0c;就来分享一下 C语言 相关的知识点~ 认识计算机语言 我们说到计算机语言&#xff0c;语言&#xff0c;就是用来沟通的工具&#xff0c;计算机语言呢&#xff1f;就是我们…

[Mac]利用Hexo+Github Pages搭建个人博客

由于我这台Mac基本没啥环境&#xff0c;因此需要从零开始配置&#xff0c;供各位参考。 注意⚠️&#xff1a;MacBook (M4)使用/bin/zsh作为默认Shell&#xff0c;其对应的配置文件为~/.zshrc 参考文档&#xff1a; HEXO系列教程 | 使用GitHub部署静态博客HEXO | 小白向教程 文…

Qt在IMX6ULL嵌入式系统中图片加载问题排查与解决

Qt在IMX6ULL嵌入式系统中图片加载问题排查与解决&#xff08;保姆级教学&#xff01;&#xff09; 在使用Qt开发IMX6ULL嵌入式系统的过程中&#xff0c;我遇到了图片加载的常见问题。本文将分享问题排查的详细过程和解决方案&#xff0c;希望能帮助遇到类似困难的开发者。 问题…

界面控件Telerik和Kendo UI 2025 Q1亮点——AI集成与数据可视化

Telerik DevCraft包含一个完整的产品栈来构建您下一个Web、移动和桌面应用程序。它使用HTML和每个.NET平台的UI库&#xff0c;加快开发速度。Telerik DevCraft提供完整的工具箱&#xff0c;用于构建现代和面向未来的业务应用程序&#xff0c;目前提供UI for ASP.NET MVC、Kendo…

pycharm终端操作远程服务器

pycharm项目已经连接了远程服务器&#xff0c;但是打开终端&#xff0c;却依旧显示的是本地的那个环境&#xff0c;也就是说没有操作远程的那个环境。只能再使用Xshell去操作远程环境&#xff0c;很麻烦&#xff0c;找了下教程。 来源&#xff1a;https://blog.csdn.net/maolim…

接口测试中数据库验证,怎么解决?

在接口测试中&#xff0c;通常需要在接口调用前后查询数据库&#xff0c;以验证接口操作是否正确影响了数据库状态。​这可以通过数据库断言来实现&#xff0c;PyMySQL库常用于连接和操作MySQL数据库。​通过该库&#xff0c;可以在测试中执行SQL语句&#xff0c;查询或修改数据…

Playwright从入门到实战:比Selenium更快的数据爬取案例实战

摘要 Playwright 是微软开源的下一代浏览器自动化工具&#xff0c;凭借其高性能、跨浏览器支持和现代化设计&#xff0c;迅速成为 Web 自动化领域的热门选择。本文将从 安装配置 开始&#xff0c;通过 实战演练 展示其核心功能&#xff0c;并与 Selenium 深度对比&#xff0c;…

day1_Flink基础

文章目录 Flink基础今日课程内容目标为什么要学Flink技术更新迭代市场需求 流式计算批量计算概念特点 批量计算的优势和弊端流式计算生活中流场景流式计算的概念 Flink简介Flink历史Flink介绍 Flink架构体系已学过的框架技术Flink架构 Flink集群搭建Flink的集群模式Standalone模…

使用FastExcel时的单个和批量插入的问题

在我们用excel表进行插入导出的时候&#xff0c;通常使用easyexcel或者FastExcel&#xff0c;而fastexcel是easy的升级版本&#xff0c;今天我们就对使用FastExcel时往数据库插入数据的业务场景做出一个详细的剖析 场景1 现在我们数据库有一张组织表&#xff0c;组织表的字段…

交换技术综合实验

一、实验拓扑 二、实验要求 内网IP地址使用172.16.0.0/16分配。 SW1和SW2之间互为备份。 VRRP/STP/VLAN/Eth-trunk均使用。 所有PC通过DHCP获取IP地址。 ISP只能配置IP地址。 所有电脑可以正常访问ISP路由器。 三、实验步骤 基于172.16.0.0/16进行划分 172.16.2.0/24&…

记录Jmeter 利用BeanShell 脚本解析JSON字符串

下载org.json包(文档说明) #下载地址 https://www.json.org/ # github 地址 https://github.com/stleary/JSON-java # api 文档说明 https://resources.arcgis.com/en/help/arcobjects-java/api/arcobjects/com/esri/arcgis/server/json/JSONObject.htmlBeanShell脚本 import…

深入解析音频:格式、同步及封装容器

物理音频和数字音频 物理音频 定义&#xff1a;物理音频就是声音在自然界中的物理表现形式&#xff0c;本质上是一种机械波&#xff0c;通过空气或其他介质传播。例如&#xff0c;当我们说话、乐器演奏或物体碰撞时&#xff0c;都会产生振动&#xff0c;这些振动会引起周围介…

RPCGC阅读

24年的MM 创新 现有点云压缩工作主要集中在保真度优化上。 而在实际应用中&#xff0c;压缩的目的是促进机器分析。例如&#xff0c;在自动驾驶中&#xff0c;有损压缩会显着丢失户外场景的详细信息。在三维重建中&#xff0c;压缩过程也会导致场景数据中语义信息(Contour)的…

医疗CMS高效管理:简化更新维护流程

内容概要 医疗行业内容管理系统&#xff08;CMS&#xff09;的核心价值在于应对医疗信息管理的多维复杂性。面对诊疗指南的动态更新、科研数据的快速迭代以及多机构协作需求&#xff0c;传统管理模式往往面临效率瓶颈与合规风险。现代化医疗CMS通过构建结构化权限管理矩阵&…

《Spring Cloud Eureka 高可用集群实战:从零构建高可靠性的微服务注册中心》

从零构建高可用 Eureka 集群 | Spring Cloud 微服务架构深度实践指南 本文核心内容基于《Spring Cloud 微服务架构开发》第1版整理&#xff0c;结合生产级实践经验优化 实验环境&#xff1a;IntelliJ IDEA 2024 | JDK 1.8| Spring Boot 2.1.7.RELEASE | Spring Cloud Greenwich…