原生js使用ajax请求,form表单提交文件

2023-09-18 17:57| 来源: 网络整理| 查看: 265

get请求

let xhr = new XMLHttpRequest(); //构造函数没有参数的情况,括号可以省略 xhr.open('GET', 'http://www.xxx/api/xxx') //open函数，指定请求方式和URL地址，如果请求方式是get,传递参数需要把参数列表用?拼接到url地址后面 xhr.send()//send函数，发起Ajax请求，get方法可以写null也可以省略 xhr.onreadystatechange = function() { // 监听xhr对象的请求状态 readyState 与服务器响应的状态 status if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText) //原生js获取响应数据通过xhr.responseText 是json数据，使用时需要用JSON.parse来转化 } }

post请求

let xhr = new XMLHttpRequest(); xhr.open('POST', 'http://www.xxx/api/xxx'); //open函数，指定请求方式和URL地址 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //设置Content-Type属性（固定写法: post请求必须设置content-type 除非数据是用FromDate获取的则不需要设置请求头） xhr.send('XX&XX&XX'); //调用send()，同时将数据提交给服务器,如果数据本身有特殊字符，需要用encodeURIComponent()来转码(encodeURI不能转码特殊字符)，如果需要解码可以使用decodeURIComponent()来解码 xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { console.log(xhr.responseText) } }

表单数据进行ajax请求刚方法可以收集并提交文件数据，需要和表单的submit一起使用。

let form = document.querySelector("form"); form.onsubmit = function (e) { e.preventDefault(); //阻止submit默认提交行为 let fd = new FormData(form); // 或者 new FormData(this); } // 注意，直接查看FormData的实例对象fd是无法查看收集到的数据，通过实例对象的get方法来获取查看。fd.get(name属性值); 就可以获取到fd中收集到的该name的数据.getAll获取到指定name的所有的值，返回的是个数组. //console.log(fd.get("username")); //append可以追加（fd中没有收集到的数据，可以使用append进行追加, 是追加到fd实例对象中，在页面中是没有的） // fd.append(key, value); //fd.forEach(function (value, key) { //形参value是收集到的数据，key就是每一项的name //注意第一个形参是value，第二个形参是key let xhr = new XMLHttpRequest(); xhr.open("POST","http://www.xxx/api/xxx"); //头当发送fd数据的时候，POST中头信息忽略不用设置，浏览器会自动帮我们设置好 //xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");不用设置 //如果设置了，请求是可以发送的，但是服务器接收到了数据，无法正常解析。 xhr.send(fd); //体 //请求体之前是字符串数据 2.0中请求体可以是FormData收集的表单数据

文件域设置

accept 属性选择文件的类型 .jpg .jpg,.png image/png image/png,image/jpg image/* *表示只要是图片，不限格式 multiple 属性支持多选写上就可以起效果文本域美化

这是非常好看的按钮 // 美化文件域的样式 ==> 使用好看的元素来替代文件域 // 点击好看的按钮的时候，模拟点击文件域 document.querySelector("button").onclick = function () { document.querySelector("input[type=file]").click(); }

获取选择文件的个数文件域的DOM对象有files属性，里面存储了所有选择的文件，通过其length属性就可以知道选择文件的个数

doucument.querySelector("#file").files.length

【本文地址】

公司简介

联系我们