使用原生js提交form表单

表单函数

    function form(formId,callback){
        try{
            const target=document.getElementById(formId);
            target.addEventListener("submit",(e)=>{
                e.preventDefault();
                const formData=new FormData(e.target);
                const formJson = Object.fromEntries(formData.entries());
                callback(formJson);
            })
        }catch(e){
            throw e;
        }
    }

 表单函数（TS版本）

 

function bind<R>(form: string | HTMLFormElement, callback: (arg: R) => void) {
    let target: Element | null;
    if (form instanceof Element) {
        target = form
    } else {
        target = document.getElementById(form);
    }
    if (target) {
        target.addEventListener("submit", (e) => {
            e.preventDefault();
            const formData = new FormData(e.target as HTMLFormElement);
            const formJson = Object.fromEntries(formData.entries());
            callback(formJson as R);
        })
    }
}
export default { bind }

 

 

测试函数

    form("myform",(res)=>{
        fetch("/url/test",{
            method:"post",
            headers:{
                "Context-Type":"application/json"
            },
            body:JSON.stringify(res)
        }).then((res)=>{
            console.log("data:",res)
        })
    })