[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单]
Posted infoworld
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单]相关的知识,希望对你有一定的参考价值。
场景
- 在开发网页表单时,需要异步提交表单并返回提交成功或错误的提示。如何在不需要
JQuery
库的前提下发送Ajax
表单请求?
说明
-
JQuery
库在在IE
还在存在的时候很适合作为前端开发兼容浏览器的javascript
库。之后现在大多数浏览器Firefox
,Chrome
,Safari
对ECMAScript
规范支持的原来越快,一些标准API
已经可以取代了JQuery
的大多数重要功能了,也很少需要做浏览器兼容的Hack
操作。 -
可以使用带有
querySelector
和querySelectorAll
的CSS
选择器语法来选择元素,使用classList API
在元素上添加、删除和切换类,使用addEventListener
将事件处理程序附加到DOM
元素和窗口等等. -
创建
Ajax
请求,需要创建XMLHttpRequest
[8]实例,并赋值onreadystatechange
属性来监听服务端的回调请求。
var r = new XMLHttpRequest();
r.onreadystatechange = function ()
if (r.readyState != 4 || r.status != 200) return;
var data = JSON.parse(r.responseText);
if(data.status == 1)
window.location = "/blog";
else
alert(data.message);
;
- 发送
form
数据,让jfinal
后端能通过request.getParemeter()
获取参数,需要设置RequestHeader
的Content-Type
值.
r.open("POST", "/blog/login",true);
r.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
- 最后就是如果有
<form>
元素,可以通过内置对象FormData
来存储form
里的提交键值对数据。最后就是组合为key1=value1&key2=value2..
格式, 再通过r.send
发送出去。
var form = document.getElementById('form1Login');
const oData = new FormData(form);
var formData = [];
for (const pair of oData.entries())
formData.push(pair[0] +"="+encodeURIComponent(pair[1]));
r.send(formData.join("&"));
例子
function login(event)
var r = new XMLHttpRequest();
r.open("POST", "/blog/login",true);
r.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
r.onreadystatechange = function ()
if (r.readyState != 4 || r.status != 200) return;
var data = JSON.parse(r.responseText);
if(data.status == 1)
window.location = "/blog";
else
alert(data.message);
;
var form = document.getElementById('form1Login');
const oData = new FormData(form);
var formData = [];
for (const pair of oData.entries())
formData.push(pair[0] +"="+encodeURIComponent(pair[1]));
r.send(formData.join("&"));
event.preventDefault();
参考
以上是关于[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单]的主要内容,如果未能解决你的问题,请参考以下文章
[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单]
[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单文件并监听进度]
[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单文件并监听进度]
[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单文件并监听进度]