[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单]

场景

1. 在开发网页表单时，需要异步提交表单并返回提交成功或错误的提示。如何在不需要JQuery库的前提下发送Ajax表单请求？

说明

1. JQuery库在在IE还在存在的时候很适合作为前端开发兼容浏览器的JavaScript库。之后现在大多数浏览器Firefox，Chrome，Safari对ECMAScript规范支持的原来越快，一些标准API已经可以取代了JQuery的大多数重要功能了，也很少需要做浏览器兼容的Hack操作。

2. 可以使用带有querySelector和querySelectorAll的CSS 选择器语法来选择元素，使用classList API在元素上添加、删除和切换类，使用addEventListener将事件处理程序附加到DOM元素和窗口等等.

3. 创建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);
    }
};

4. 发送form数据，让jfinal后端能通过request.getParemeter()获取参数，需要设置RequestHeader的Content-Type值.

r.open("POST", "/blog/login",true);
r.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

5. 最后就是如果有<form>元素，可以通过内置对象FormData来存储form里的提交键值对数据。最后就是组合为key1=value1&key2=value2..格式, 再通过r.send发送出去。具体的项目例子可以看我的JavaWeb学院课程^[9]开发JavaWeb网站精讲-基于JFinal框架的第四章第1课时。

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();
}

参考

1. 提交Ajax请求不使用JQuery

2. XMLHttpRequest详解及ajax实现

3. Using FormData Objects - Web APIs | MDN

4. JavaScript | MDN

5. ECMAScript® 2023 Language Specification

6. 去掉 jQuery 后，我们的网站性能起飞，速度快了 17%_前端

7. jQuery已“死”？为清除技术债，我们删掉了前端所有jQuery依赖

8. XMLHttpRequest - Web APIs | MDN

9. 开发JavaWeb网站精讲-基于JFinal框架