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

Posted infoworld

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单]相关的知识,希望对你有一定的参考价值。

场景

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

说明

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

  2. 可以使用带有querySelectorquerySelectorAllCSS 选择器语法来选择元素,使用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);
    
;
  1. 发送form数据,让jfinal后端能通过request.getParemeter()获取参数,需要设置RequestHeaderContent-Type值.
r.open("POST", "/blog/login",true);
r.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  1. 最后就是如果有<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框架

以上是关于[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单]的主要内容,如果未能解决你的问题,请参考以下文章

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

[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单文件并监听进度]

[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单文件并监听进度]

[JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单文件并监听进度]

[JavaScript]_[初级]_[关于forin或for...in循环语句的用法]

[JavaScript]_[初级]_[关于forin或for...in循环语句的用法]