Ajax-Day02

最新推荐文章于 2024-08-09 10:00:18 发布
最新推荐文章于 2024-08-09 10:00:18 发布
阅读量118 收藏
点赞数
分类专栏： 笔记 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weiweianx/article/details/114886046
版权
本文详细介绍了模板引擎如art-template的使用步骤和语法，包括如何将数据与HTML结合，以及在实际场景中的应用案例。同时，文章探讨了FormData对象的作用，如模拟表单、异步文件上传，并通过实例展示了如何将HTML表单转化为FormData对象，以及如何通过Ajax进行数据提交。此外，还讨论了同源政策和如何利用JSONP突破跨域限制。
摘要由CSDN通过智能技术生成
模板引擎
使用步骤
  • 下载art-template模板引擎库文件并在html页面中引入库文件
	<script src="js/template-web.js"></script>
  • 准备art-template模板
	<script id="tpl" type="text/html">
        <div class="box">123</div>
    </script>
  • 告诉模板引擎将哪一个模板和哪个数据进行拼接
	var html = template('tpl',{username:'andy',age:20});
  • 将拼接好的html字符串添加到页面中
	document.getElementById('container').innerHTML = html;
  • 通过模板语法告诉模板引擎，数据和html字符串要如何拼接
	<script id="tpl" type="text/html">
        <div class="box">{{username}}</div>
    </script>

01-客户端模板引擎的使用步骤
案例：02-验证邮箱地址唯一性
案例：03-搜索框内容自动提示
案例：04-省市区三级联动

FormData对象

作用

  1. 模拟HTML表单，相当于将HTML表单映射成表单对象，自动将表单对象中的数据拼接成请求参数的格式；
  2. 异步上传二进制文件；

使用

  • 准备html表单；
<form id="form">
	<input type="text" name="username" />
	<input type="password" name="password" />
	<input type="button" />
</form>
  • 将html表单转化为FormData对象；
var form = doucument.getElementById('form');
var formData = new FormData(form);
  • 提交表单对象（不能使用get方法）；
xhr.send(formData);

案例：05-formdata对象的使用方法
app.js

//引入express框架
const express  = require('express');
//路径处理模块
const path = require('path');
const formidable = require('formidable');
//创建web服务器
const app = express();

//静态资源访问服务功能
app.use(express.static(path.join(__dirname,'public')));

app.post('/formData',(req,res)=>{
    //创建fromidable表单解析对象
    const form = new formidable.IncomingForm();
    //解析客户端传递过来的formdata对象
    form.parse(req,(err,fields,files)=>{
        // err:错误信息，fields：保存了表单当中的普通请求参数，files：和文件长传相关的信息
        res.send(fields);
    })
})

//监听端口
app.listen(3000);
//控制台提示输出
console.log('服务器启动成功');

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>05-formdata对象的使用方法</title>
</head>
<body>
    <!-- 创建普通的html表单 -->
    <form id="form">
        <input type="text" name="username" />
        <input type="password" name="password" />
        <input type="button" id="btn" value="提交"/>
    </form>

    <script>
        //获取按钮
        var btn = document.getElementById('btn');
        //获取表单
        var form = document.getElementById('form');
        //为按钮添加点击事件
        btn.onclick = function(){
            //将普通表单转换为表单对象
            var formData = new FormData(form);
            //创建ajax对象
            var xhr = new XMLHttpRequest();
            //对ajax对象进行配置
            xhr.open('post','http://localhost:3000/formData');
            //发送ajax请求
            xhr.send(formData);

            //监听xhr对象下的onload事件
            xhr.onload = function(){
                if(xhr.status == 200){
                    console.log(xhr.responseText);
                }
            }
        }
    </script>
</body>
</html>
formData对象的实例方法
  1. 获取表单对象中的属性的值；
formData.get('key');
  1. 设置表单对象中属性的值
formData.set('key','value');

案例：06-formData对象的实例方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>06-formData对象的实例方法</title>
</head>
<body>
    <!-- 创建普通的html表单 -->
    <form id="form">
        <input type="text" name="username" />
        <input type="password" name="password" />
        <input type="button" id="btn" value="提交"/>
    </form>

    <script>
        //获取按钮
        var btn = document.getElementById('btn');
        //获取表单
        var form = document.getElementById('form');
        //为按钮添加点击事件
        btn.onclick = function(){
            //将普通表单转换为表单对象
            var formData = new FormData(form);
            //获取表单对象属性的值
            console.log(formData.get('username'));
            //如果设置的表单属性存在，将覆盖这个表单属性
            formData.set('username','itcast');
            //如果设置的表单属性不存在，将会创建这个表单属性
            formData.set('age',100);
            //删除表单对象的属性
            formData.delete('password');
            
            //创建ajax对象
            var xhr = new XMLHttpRequest();
            //对ajax对象进行配置
            xhr.open('post','http://localhost:3000/formData');
            //发送ajax请求
            xhr.send(formData);

            //监听xhr对象下的onload事件
            xhr.onload = function(){
                if(xhr.status == 200){
                    console.log(xhr.responseText);
                }
            }

            //创建空的表单对象
            var f = new FormData();
            //向表单对象中追加属性值
            f.append('num','123');
            console.log(f.get('num'));
            //SET会覆盖原有的值，append会保留原有的值，再添加一个相同的属性
        }
    </script>
</body>
</html>

app.js对应06文件的部分

//对应06html
app.post('/formData',(req,res)=>{
    //创建fromidable表单解析对象
    const form = new formidable.IncomingForm();
    //解析客户端传递过来的formdata对象
    form.parse(req,(err,fields,files)=>{
        console.log(fields);
        // err:错误信息，fields：保存了表单当中的普通请求参数，files：和文件长传相关的信息
        res.send(fields);
    })
})
formData对象文件上传
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>07-formdata文件上传</title>
    <style>
        .progress{
            width: 100px;
            height: 20px;
        }
        .progress-bar{
            height: 100%;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <input type="file" name="" id="file">
    <div class="progress" id="bar">
        <div class="progress-bar" style="width: 60%">60%</div>
    </div>
    <script>
        //获取文件选择器
        var file = document.querySelector('#file');
        //获取进度条元素
        var bar = document.getElementById('bar');
        //为文件选择控件添加onchange事件
        //在用户选择文件后触发
        file.onchange = function(){
            //创建空表单对象
            var formData = new FormData();
            //将用户选择的二进制文件追加到表单对象中
            formData.append('attrName',this.files[0]);

            //创建ajax对象
            var xhr = new XMLHttpRequest();
            //配置ajax对象，请求方式必须为post
            xhr.open('post','http://localhost:3000/upload');
            //在文件上传的过程中持续触发
            xhr.upload.onprogress = function(ev){
               console.log(ev);
               //ev.loaded 文件已经上传了多少
               //ev.total 上传文件的总大小
               var result = (ev.loaded / ev.total)*100+'%';
               //设置进度条的宽度
               bar.style.width = result;
               //将百分比显示在进度条中
               bar.innerHTML = result;
            }
            //发送ajax请求
            xhr.send(formData);

            //监听xhr对象下的onload事件
            xhr.onload = function(){
                //如果服务器返回的http状态码为200，说明请求成功
                if(xhr.status == 200){
                    //将服务器返回的数据显示在控制台中
                    console.log(xhr.responseText);
                }
            }
        }
    </script>
</body>
</html>

app.js对应07的部分

// 对应07html
app.post('/upload',(req,res)=>{
     //创建fromidable表单解析对象
     const form = new formidable.IncomingForm();
     //设置客户端上传文件的传输路径
     form.uploadDir = path.join(__dirname,'public','upload');
    
     //保留上传文件的后缀名字
     form.keepExtensions = true;
     //解析客户端传递过来的formdata对象
     form.parse(req,(err,fields,files)=>{
        // err:错误信息，fields：保存了表单当中的普通请求参数，files：和文件长传相关的信息
        res.send('ok');
     })
})
formData对象图片上传
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>07-formdata文件上传</title>
    <style>
        .progress{
            width: 100px;
            height: 20px;
        }
        .progress-bar{
            height: 100%;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <input type="file" name="" id="file">
    <div class="progress" id="bar">
        <div class="progress-bar" style="width: 60%">60%</div>
    </div>
    <div id="box"></div>
    <script>
        //获取文件选择器
        var file = document.querySelector('#file');
        //获取进度条元素
        var bar = document.getElementById('#bar');
        // 
        var box = document.getElementById('#box');
        //为文件选择控件添加onchange事件
        //在用户选择文件后触发
        file.onchange = function(){
            //创建空表单对象
            var formData = new FormData();
            //将用户选择的二进制文件追加到表单对象中
            formData.append('attrName',this.files[0]);

            //创建ajax对象
            var xhr = new XMLHttpRequest();
            //配置ajax对象，请求方式必须为post
            xhr.open('post','http://localhost:3000/imgupload');
            //在文件上传的过程中持续触发
            xhr.upload.onprogress = function(ev){
               console.log(ev);
               //ev.loaded 文件已经上传了多少
               //ev.total 上传文件的总大小
               var result = (ev.loaded / ev.total)*100+'%';
               //设置进度条的宽度
               bar.style.width = result;
               //将百分比显示在进度条中
               bar.innerHTML = result;
            }
            //发送ajax请求
            xhr.send(formData);

            //监听xhr对象下的onload事件
            xhr.onload = function(){
                //如果服务器返回的http状态码为200，说明请求成功
                if(xhr.status == 200){
                    //将服务器返回的数据显示在控制台中
                    console.log(xhr.responseText);

                    // 如果数据为数组
                    // 将服务器返回的数据显示在控制台中
                    var result = JSON.parse(xhr.responseText);
                    // 动态创建img表单
                    var img = document.createElement('img');
                    // 给图片标签设计src属性
                    img.src = result.path;
                    img.onload = function(){
                        box.appendChild(img);
                    }
                }
            }
        }
    </script>
</body>
</html>

app.js对应08的部分

//对应08实现
app.post('/imgupload',(req,res)=>{
    //创建fromidable表单解析对象
    const form = new formidable.IncomingForm();
    //设置客户端上传文件的传输路径
    form.uploadDir = path.join(__dirname,'public','upload');
   
    //保留上传文件的后缀名字
    form.keepExtensions = true;
    //解析客户端传递过来的formdata对象
    form.parse(req,(err,fields,files)=>{
       // err:错误信息，fields：保存了表单当中的普通请求参数，files：和文件长传相关的信息
       res.send({
           //返回上传文件的地址
           path:files.attrName.path.split('public')[1]
       });
    })
})
ajax请求限制

ajax只能向自己的服务器发送请求。

什么是同源

三个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，只要有一个不相同，就是不同源。

http://www.example.com/dir/page.html//端口默认80
http://www.example.com/dir2/other.html//同源
http://example.com/dir/other.html//不同源（域名不同）
http://www.example.com:82/dir/other.html//不同源（端口不同）
https://www.example.com/dir/page.html//不同源（协议不同）
同源政策

**目的：**为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指A网站在客户端设置的cookie，B网站是不能访问的。政策中有一规定：无法向非同源地址发送ajax请求，如果请求，浏览器就会报错。

使用JSONP解决同源限制的问题

JSONP：是json with padding的缩写，它不属于ajax请求，但是可以模拟ajax请求。

1、将不同源的服务器断请求地址卸载scrtpt标签的src属性中

<script src="www.example.com"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

2、服务器响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的函数

const data = 'fn{name:'zhangsan',age:20}';
res.send(data);

3、在客户端全局作用域下定义函数fn

function fn(data){}

4、在fn函数内部对服务器返回的数据进行处理

function fn(data){console.log(data)}
Naiewiew
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax-Day01
qq_43375584的博客
05-03 1023
什么是ajax Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法， 包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 [3]  使用Aj
Week09-Day02
04-01
在"Week09-Day02-main"这个文件中，很可能是包含本次学习的主要代码示例、笔记或者练习。对于JavaScript学习者来说，实际编码是巩固理论知识的最佳方式。这个文件可能包含了如何创建和运行JavaScript脚本，如何与...
AJAX-day02-AJAX原理
来自计科大一萌新的编程记录本
07-20 556
学习目标：1.了解Ajax原理 2.学会使用XMLHttpRequest 和Promise并能封装简易的axios
AJAX-day1：
2303_79590957的博客
07-05 1162
AJAX是浏览器与服务器进行数据通信的技术 =>把数据变活。
AJAX 入门-day1
tang好好学习
06-18 939
2. 使用serialize函数，快速收集表单元素的值。* 建议name属性的值，最好和接口文档参数名一致。注意：axios 在运行时把参数名和值，会拼接到 url。需求：请求目标资源地址，拿到省份列表数据，显示到页面。* 表单元素设置name属性，值会作为。HTTP 协议：规定了浏览器发送及服务器返回内容的。HTTP 协议：规定了浏览器发送及服务器返回内容的。* - false：不获取空值。* 参数1：要获取哪个表单的数据。场景：再次注册相同的账号，会遇到报错信息。
Ajax-Day39
qq_26016931的博客
05-19 119
AjaxAjax简介创建使用Ajax三级联动 Ajax简介 创建使用 Ajax三级联动
AJAX-day01-AJAX入门
来自计科大一萌新的编程记录本
07-15 533
学习目标：1.了解Ajax的概念 2.学会使用axios 3.了解http协议和接口文档
Ajax-day-01-请求报文与响应报文
weixin_57785450的博客
07-17 143
学习笔记 Ajax-day-01-请求报文与响应报文
Day03-01：Ajax-介绍
m0_63464979的博客
07-03 411
1.Ajax1.概念：Asynchronous JavaScript And XML，异步的JavaScript和XML。2.作用：1.数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。2.异步交互：可以在不重新加载整个页面的情况下，与服务器叫喊数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。​ ----------请求----------》
AJAX-day03-AJAX进阶
来自计科大一萌新的编程记录本
07-21 738
学习目标：1.了解同步代码和异步代码 2.能够运用Promise - 链式调用和async函数解决回调函数地狱问题 3.深入了解 事件循环 的概念 4.知道宏任务和微任务
【漏洞复现】（1day）宏景-ajax-sql注入exp与漏洞复现
weixin_56297026的博客
12-14 739
网络安全 渗透测试 sql注入 宏景-ajax 漏洞复现
ajax-day01.rar_ajax_union1de
09-23
**Ajax（Asynchronous JavaScript and XML）**是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使网页实现异步更新。这一技术的核心在于JavaScript，XML则...
ajax-day01.rar_达内开发学习笔记
09-20
在“ajax-day01.rar_达内开发学习笔记”这个压缩包中，包含了第一天学习Ajax的基础内容，旨在帮助初学者理解并掌握Ajax的核心概念和使用方法。** **一、Ajax简介** Ajax并不是一种单一的技术，而是一组技术的组合，...
html-day02.zip_javascrip
09-19
`html-day02` 文件可能是另一个HTML教程的章节，可能包含更复杂的JavaScript示例，如AJAX（异步JavaScript和XML），用于从服务器获取数据并在不刷新整个页面的情况下更新内容。此外，它也可能涉及DOM遍历和操作，...
FE21-JS-DAY02-Vendula-Bettina
03-04
【标题】"FE21-JS-DAY02-Vendula-Bettina"是一个课程或者教程的名字，可能指的是一个关于JavaScript编程的第二天课程内容，由Vendula和Bettina两位讲师主讲。这个课程可能重点围绕着JavaScript的核心概念、语法和...
【漏洞复现】某赛通电子文档安全管理系统 MultiServerAjax SQL注入漏洞
siu~
08-09 360
某赛通电子文档安全管理系统MultiServerAjax接口处存在sql注入漏洞，攻击者除了可以利用 SQL 注入漏洞获取数据库中的信息（例如，管理员后台密码、站点的用户个人信息）之外，甚至在高权限的情况可向服务器中写入木马，进一步获取服务器系统权限。
ajax图书管理项目
E___V___E的博客
08-03 462
不离开当前页面，显示单独内容，让用户操作功能：不离开当前页面，显示单独内容，供用户操作步骤：1.引入bootstrap.css和bootstrap.js 2.准备弹框标签，确认结构3.通过自定义属性，控制弹框的显示和隐藏。
插件、cookie存储，json，ajax详解
lxt135744的博客
08-06 272
json字符串是后端返回给我们的数据，我们自己需要转为json对象。，后来又引入了cookie进行存储。sessionStorage使用如下。localStorage使用如下。
财务报表，项目费用支出明细.xlsx
最新发布
08-09
工资表，财务报表，对账表，付款申请，财务报告，费用支出表 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值