jquery使用FormData提交數據


在jquery中,使用ajax提交表單數據。

FormData可以很方便地獲取到表單中的所有數據。

注意: ajax中的data參數為FormData類型時,contentType就不要設置成application/json了。

如果contentType設置成application/json,需要將FormData轉換為json

示例如下:

<script type="text/javascript" >

    $(document).ready( function () {

        $("#commit").click(function () {
            var form =new FormData($( "#form-user")[0] );     //通過id獲取表單的數據
            console.log("ajax");
            $.ajax({
                type:"POST",                             //請求的類型
                url:"/user/test",                  //請求的路徑
                data: form  ,                    //請求的參數
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (msg) {                 //成功返回觸發的方法
                    console.log("ajax請求成功")
                },
                //請求失敗觸發的方法
                error:function(XMLHttpRequest, textStatus, errorThrown){
                    console.log("ajax請求失敗");
                    console.log("請求對象XMLHttpRequest: "+XMLHttpRequest);
                    console.log("錯誤類型textStatus: "+textStatus);
                    console.log("異常對象errorThrown: "+errorThrown);
                }
            })
        })
        }
    );
</script>

<body>
    <form  id="form-user">
        賬號:
       <input type="text" name="userName">  <br>
        年齡:    
       <input type="text" name="age">     <br>
        vip :
         是:  <input type="checkbox" name="isVip" value="true">
         否:  <input type="checkbox" name="isVip" value="false">           <br>
         生日: 
       <input type="date" name="birthday">            <br>
       <button id="commit" >提交</button>
    </form>
</body>

后台接收數據,如下:

  /**
     * 點擊表單,獲取formData后通過ajax跳轉而來。
     * @param user
     * @return
     */
    @RequestMapping(value = "/user/test",method = RequestMethod.POST )
    public String getUserInfo( User user ,@RequestParam ("userName") String userName){
          System.out.println(user.getUserName() +","+user.getAge()+","+user.getBirthday());
System.out.println("userName"+userName);
return "test"; }

 

參考資料 : 

https://blog.csdn.net/csdn2193714269/article/details/76269656

 https://www.cnblogs.com/zhuxiaojie/p/4783939.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM