[技巧]AJAX表单传参操作方法有哪些?

 <form onsubmit="submitFn()" id="formArea">
     <input type="text" name="username" value="shuke">
     <input type="text" name="userpwd" value="shlleo">
     <button>数据提交</button>
 </form>

formData 没有上传的操作

前台 form+ajax

 $.ajax({
     url: "http://localhost:6600/api/testsql",
     method: "POST",
     data: new FormData($("#formArea")[0]),
     processData: false, // 不处理数据
     contentType: false, // 不设置内容类型
     traditional:true,   // 数组传递不处理
     dataType:"json",
     success(res) {
         console.log(1, res)
     },
     error(err) {
         console.log(2, err);
     }
 })

后台: express

 //路由操作 必须要有 uploader 方法
 router.post("/testsql",uploader.single(),RC.testsql)
 //表单数据 req.body
 async testsql(req,res){
    res.json({...req.body})
 }

通过对象上传时的操作

适合没有上传时的操作

 function submitFn(flag=false) {
     const myForm=$("#formArea")[0];
     const obj={
         username:myForm.username.value,
         userpwd:myForm.userpwd.value
     }
     $.ajax({
         url: "http://localhost:6600/api/testsql",
         method: "POST",
         data: obj,
         dataType:"json",
         success(res) {
             console.log(1, res)
         },
         error(err) {
             console.log(2, err);
         }
     })
     if(!flag){
         event.preventDefault()
     }
 
 }
 
 //后台接口
 router.post("/testsql",RC.testsql)

JQ通过serialize() 方法

可以对表单内容进行序列化。以键值对的方式进行呈现。适合没有上传时的操作.

 function submitFn(flag=false) {
     const myForm=$("#formArea").serialize();
     $.ajax({
         url: "http://localhost:6600/api/testsql",
         method: "POST",
         data: myForm,
         dataType:"json",
         success(res) {
             console.log(1, res)
         },
         error(err) {
             console.log(2, err);
         }
     })
     if(!flag){
         event.preventDefault()
     }
 }
 //后台接口
 router.post("/testsql",RC.testsql)