Ajax简介和实例

news2024/11/16 3:18:15

目录

什么是 AJAX ？ 

AJAX实例 

ajax-get无参

 ajax-get有参

对象和查询字符串的互转

ajax-post

 ajax-post 表单

AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

什么是 AJAX ？ 

菜鸟教程是这样介绍的：

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

AJAX实例 

从前面的学习，我们可以知道get和post的区别，详情见前端学习之HTTP协议的介绍(5)_学前端的狗头苏丹的博客-CSDN博客

ajax-get无参

<!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>
        // 1.创建一个请求实例
        var xhr = new XMLHttpRequest();
        // 2.打开一个链接 open('get/post','URL')
        xhr.open('get','http://121.199.0.35:8888/index/carousel/findAll');
        // 3.发送请求 get携带参数在地址栏 post携带参数在请求体
        xhr.send();
        // 4.监听状态改变 接收响应 onreadystatechange
        // readyState 4 响应完成
        // 0 open未调用 1 open已经调用 2 接收响应头信息 3 接收响应体信息 4 响应完成
        // status 200 响应成功
        xhr.onreadystatechange = function(){
            // 表示响应完成  表示响应成功
            if(xhr.readyState === 4 && xhr.status === 200){
                console.log(xhr.response,'接收响应体');
                var res = JSON.parse(xhr.response);
                console.log(res);
                res.data.forEach(function(item){
                    var div = document.createElement('div');
                    var img = document.createElement('img');
                    div.innerHTML = item.name + ' ' +item.introduce;
                    img.src = item.url;
                    img.style.width = '400px';
                    document.body.appendChild(div);
                    document.body.appendChild(img);
                })
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

 ajax-get有参

利用Qs.stringify() 将对象序列化成URL形式进行拼接，需要引入

<!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="https://cdn.bootcdn.net/ajax/libs/qs/6.11.1/qs.js"></script>
    <script>
        window.onload = function(){
            /**
             * get请求带参数 分页查询 一页查询11条数据 page1 pageSize 11
            */
            // 1.创建一个XMLHttpRequest请求实例
            var xhr = new XMLHttpRequest();
            var params = {
                page:1,
                pageSize:10
            }
            // 将对象转为查询字符串 将对象 序列化成URL的形式，以&进行拼接  Qs.styingify()
            var paramsString = Qs.stringify(params);
            console.log(paramsString);
            // ?page=1&pageSize=11 查询字符串
            // 2.打开一个链接
            xhr.open('get','http://121.199.0.35:8888/index/article/pageQuery'+'?'+paramsString);
            // 3.发送请求
            xhr.send();
            // 4.监听状态改变 接收响应
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4 && xhr.status === 200){
                    var response = JSON.parse(xhr.response);
                    console.log(response);
                    var dl = document.createElement('dl');
                    response.data.list.forEach(function(item){
                        var dt = document.createElement('dt'); 
                        var dd = document.createElement('dd');
                        dt.innerHTML = item.title;
                        dd.innerHTML = item.content;
                        dl.appendChild(dt);
                        dl.appendChild(dd);
                        document.body.appendChild(dl);
                    })
                }
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

 

对象和查询字符串的互转

假如不使用Qs的方法，将该怎么转换呢？

<!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>
        var obj = {
            name:'terry',
            age:12,
            title:'标题'
        }

        // 转成查询字符串 ?name=terry&age=12&title=标题
        function queryString(obj){
            var str = '';
            for(let key in obj){
                // key 属性名 obj[key]属性值 
                str += '&'+key+ '=' + obj[key]
            }
            str = str.replace('&','?');
            return str;
        }
        var res= queryString(obj);
        // res ?name=terry&age=12&title=标题   将查询字符串转为对象
        function parse(res){
            var obj = {};
            res.split('&').forEach(function(item){
                if(item.includes('?')){
                    item = item.slice(1);
                }
                // console.log(item);     ["?name=terry","age=12","title=标题"]
                let newArr = item.split('=');
                // console.log(newArr);   [name,terry] [age,12] [title,标题]
                obj[newArr[0]] = newArr[1];
            })
            return obj;
        }
        console.log(parse(res));
    </script>
</head>
<body>
    
</body>
</html>

ajax-post

<!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>
        // 1.创建一个请求实例
        var xhr = new XMLHttpRequest();
        // 2.打开链接
        var obj = {
            username:'admin1',
            password:123321
        }
        xhr.open('post','http://121.199.0.35:8888/user/login');
        // 2.2 设置请求头为json格式 setRequestHeader 
		/**
		 * 1.Content-Type application/json 设置json格式
		 * 2.Content-Type application/x-www-form-urlencoded 设置为表单格式 需要URL转码 用Qs.stringify()
		 * 3.Content-Type text/plain;charset=UTF-8 默认值
		*/
        xhr.setRequestHeader('Content-Type','application/json;charset=UTF-8');
        // 3.发送请求
        xhr.send(JSON.stringify(obj));
        // 4.监听状态改变 接收响应
        xhr.onreadystatechange = function(){
            if(xhr.readyState ===4 && xhr.status === 200){
                console.log(JSON.parse(xhr.response));
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

 ajax-post 表单

需要使用Qs.stringify()将表单转换为URL形式

<!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="https://cdn.bootcdn.net/ajax/libs/qs/6.11.1/qs.js"></script>
    <script>
        // 1.创建一个请求实例
        var xhr = new XMLHttpRequest();
        // 2.打开一个链接
        xhr.open('post','http://121.199.0.35:8888/baseUser/saveOrUpdate');
        var obj = {
            username:'杰米',
            password:'123456',
            telephone:'15921315421'
        }
        // 2.2设置请求头的格式
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded;charset=UTF-8')
        // 3.发送请求
        xhr.send(Qs.stringify(obj));
        // 4.监听状态改变 接收响应
        xhr.onreadystatechange = function(){
            if(xhr.readyState ===4 && xhr.status === 200){
                console.log(JSON.parse(xhr.response));
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

 

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

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

相关文章

MySQL数据修改和插入数据

MySQL数据修改和插入数据

1.创建表&#xff1a; 创建员工表employee&#xff0c;字段如下&#xff1a; id&#xff08;员工编号&#xff09;&#xff0c;name&#xff08;员工名字&#xff09;&#xff0c;gender&#xff08;员工性别&#xff09;&#xff0c;salary&#xff08;员工薪资&#xff09; …
阅读更多...
华为、阿里巴巴、字节跳动 100+ Python 面试问题总结（二）

华为、阿里巴巴、字节跳动 100+ Python 面试问题总结（二）

系列文章目录 个人简介&#xff1a;机电专业在读研究生&#xff0c;CSDN内容合伙人&#xff0c;博主个人首页 Python面试专栏&#xff1a;《Python面试》此专栏面向准备面试的2024届毕业生。欢迎阅读&#xff0c;一起进步&#xff01;&#x1f31f;&#x1f31f;&#x1f31f; …
阅读更多...
Python基础综合案例-数据可视化(柱状图)

Python基础综合案例-数据可视化(柱状图)

今天给大家带来的是Python综合实战开发的数据可视化操作 通过python实现对数据的分析、可视化 数据来源:线上公布数据&#xff0c;需要可私信 前期准备工作&#xff1a;Python可视化准备工作 前期模块安装等前期基础的准备工作大家可以看我之前的文章讲解&#xff0c;有问题可…
阅读更多...
ROS-Moveit-ABORTED CONTROL_FAILED

ROS-Moveit-ABORTED CONTROL_FAILED

问题 当我使用python程序控制机械臂作笛卡尔空间运动时&#xff0c;让其轨迹在空间中画一个正方形&#xff0c;具体程序如下 #!/usr/bin/env python # -*- coding: utf-8 -*-import rospy, sys import moveit_commander from moveit_commander import MoveGroupCommander fro…
阅读更多...
IDEA 2023.1.3最新版安装教程

IDEA 2023.1.3最新版安装教程

目录 一、前言 一、下载 二、安装 总结 一、前言 常常学东西都是从头学起&#xff0c;然后学了几天就没然后了。这不久前把电脑重新安装了系统&#xff0c;磁盘的东西也一股脑的全清掉了。心里只想让电脑干干净净的&#xff0c;放的东西也可以做到分门别类&#xff0c;井然…
阅读更多...
工频耐压试验装置的产品特点

工频耐压试验装置的产品特点

产品特点&#xff1a; 1、具有高压电压、低压电流、零位指示、电源指示、工作指示、计时指示&#xff1b;过流保护、零位启动保护、声光语言报警提醒等功能。 2、采用新型时间继电器&#xff0c;新型电流继电器 计时范围更广&#xff08;1S&#xff5e;99H&#xff09;更精确、…
阅读更多...
Element-UI 时间选择器 el-time-picker 禁用 秒 选项

Element-UI 时间选择器 el-time-picker 禁用 秒 选项

文章目录 默认格式 HH:mm:ss禁用 秒 选项el-time-picker 设置日期和时间组合自定义时间格式 默认格式 HH:mm:ss 时间选择器 format 标签默认为 HH:mm:ss <el-time-picker v-model"value"is-rangerange-separator"-"format"HH:mm:ss"start-p…
阅读更多...
Docker学习笔记25

Docker学习笔记25

Docker swarm 应用&#xff1a; 镜像准备&#xff1a; 参照Docker学习笔记13&#xff0c;创建centos-nginx:v1的镜像&#xff1a; [rootswarm-1 nginxtest]# docker build -t centos-nginx:v1 . [] Building 211.5s (12/13) [] Building 211.7s (12/13) [] Building 211.8s (…
阅读更多...
HTML 基础篇

HTML 基础篇

本章内容&#xff1a; 简介 HTML定义标签定义和属性HTML5基本结构HTML5字符集 <head>标签 <title><base/><link/>&#xff08;rel、href、type&#xff09;<meta/>&#xff08;http-equiv、name、content&#xff09; <body>标签 块级标…
阅读更多...
逻辑漏洞-密码找回

逻辑漏洞-密码找回

声明&#xff1a;本实验教程仅供研究学习使用&#xff0c;请勿用于非法用途&#xff0c;违者一律自行承担所有风险和责任&#xff01; 实验目的 利用密码找回漏洞&#xff0c;实现任意用户的密码重置。理解漏洞发生的场景。 实验环境 操作系统&#xff1a;CENTOS 7 软件&am…
阅读更多...
【Centos】crontab系统定时配置加载用户环境变量

【Centos】crontab系统定时配置加载用户环境变量

使用linux系统crontab默认是没有加载用户的环境变量的&#xff0c;所以有些命令是用不了的。 打开任务计划 crontab -e添加环境变量信息 开头加入如下内容&#xff1a; SHELL/bin/bash PATH/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin完整内容示例如下&am…
阅读更多...
基于单片机的语音识别智能垃圾桶垃圾分类的设计与实现

基于单片机的语音识别智能垃圾桶垃圾分类的设计与实现

功能介绍 以51单片机作为主控系统&#xff1b;液晶显示当前信息和状态&#xff1b;通过语音识别模块对当前垃圾种类进行语音识别&#xff1b; 通过蜂鸣器进行声光报警提醒垃圾桶已满&#xff1b;采用舵机控制垃圾桶打开关闭&#xff1b;超声波检测当前垃圾桶满溢程度&#xff1…
阅读更多...
直击WAIC2023｜英码正式加入华为昇腾APN，共同携手引领AI向实而生！

直击WAIC2023｜英码正式加入华为昇腾APN，共同携手引领AI向实而生！

7月6日&#xff0c;以“智联世界&#xff0c;生成未来”为主题的世界人工智能大会&#xff08;以下简称&#xff1a;WAIC2023&#xff09;在上海世博中心盛大开幕。本届AI盛会将举办科学前沿和产业发展2场全体会议、10场主题论坛&#xff0c;以及多场生态论坛及活动&#xff1b…
阅读更多...
数据库应用：数据库管理系统与安装MySQL数据库

数据库应用：数据库管理系统与安装MySQL数据库

目录 一、理论 1.数据库管理系统 2.关系型数据库 3.数据库 4.MySQL数据库 5.MySQL部署 二、实验 1.yum安装MySQL 2.配置MySQL数据库的Tab补全 三、问题 1.数据库登录报错 2.数据库密码复杂度报错 四、总结 一、理论 1.数据库管理系统 &#xff08;1&#xff09…
阅读更多...
UML类图的6种关系

UML类图的6种关系

目录 一、UML类图的6种关系&#xff08;依赖关系由弱到强&#xff09;&#xff1a; 二、6种关系归纳总结 2.1 第一种归纳方式&#xff1a;先分组&#xff0c;再分组&#xff08;由大到小&#xff0c;由宏观到微观&#xff09; 2.2 第二种归纳方式&#xff1a;先聚合&#x…
阅读更多...
spring-spring整合Junit

spring-spring整合Junit

1.导包 <artifactId>spring-test</artifactId> <artifactId>junit</artifactId> 2.创建测试类
阅读更多...
Linux性能优化实践——如何学习Linux性能优化

Linux性能优化实践——如何学习Linux性能优化

性能指标 学习性能优化的第一步便是了解“性能指标”这个概念。 “高并发”和“响应快”对应着性能优化的两个核心指标——“吞吐”和“延时”。这两个指标是从应用负载的角度来考察性能的&#xff0c;直接影响了产品终端的用户体验。跟他们对应的&#xff0c;是从系统资源的视…
阅读更多...
基于Flask的问答系统的设计与实现

基于Flask的问答系统的设计与实现

这个项目刚开始是跟着哔哩哔哩上的一个教程学习的&#xff0c;后面完成初步实现后&#xff0c;我按照自己的设计加入了新的功能。 文章目录 数据表mysqlredis 项目展示注册登录首页问题详情页问题回答及回复搜索功能发布问题功能评论我的功能回复我的功能我的文章功能编辑文章…
阅读更多...
springcloud eureka增加安全认证

springcloud eureka增加安全认证

网上很多资料写的不全&#xff0c;不细致。 springcloud架构&#xff0c;本地运行代码是eureka地址一般为localhost:port&#xff08;自己暴露的端口&#xff09;&#xff0c;例如http://localhost:9000/ &#xff0c;但是如果在服务器&#xff0c;且使用k8s部署&#xff0c;一…
阅读更多...
科大讯飞开发者大赛，有点东西~

科大讯飞开发者大赛，有点东西~

小伙伴们大家好&#xff0c;我是阿秀。 如果要说 23 年上半年最火的科技圈话题是什么&#xff1f; 那AIGC和大模型相关的话题稳坐头把交椅&#xff0c;奈何由于不少服务器在海外&#xff0c;很多人因为没有充分条件无法体验。 后来众多国产大模型也跟上步伐&#xff0c;智能问答…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023