양식 데이터를 비동기적으로 제출하는 jquery ajax 방법의 분석 예-JS 튜토리얼-php.cn

양식 데이터를 비동기적으로 제출하는 jquery ajax 방법의 분석 예

小云云

풀어 주다： 2017-12-26 15:16:27

원래의

1868명이 탐색했습니다.

이 글은 모두를 위해 jquery ajax에서 양식 데이터를 비동기적으로 제출하는 방법을 주로 소개합니다. 관심 있는 친구들이 참고할 수 있기를 바랍니다.

jquery의 ajax 메서드를 사용하여 양식을 비동기적으로 제출하면 json 데이터가 백그라운드에서 반환되고 콜백 함수에 의해 처리됩니다.

에서 처리되는 데이터는 다음과 같습니다. 양식은 serialize() 메서드를 사용하여 직렬화할 수 있으며 제출된 데이터에 파일 스트림이 포함된 경우 FormData 개체를 사용해야 합니다.

파일이 없는 양식 데이터는 다음을 사용합니다. var data = $(form).serialize();

파일이 있는 양식 데이터 사용: var data = new FormData($(form)[0]);

1. 파일이 없는 Ajax 제출 데이터:

html: 양식 form

 <form id="addForm" action="${pageContext.request.contextPath}/admin/saveAdd" method="post">    
  <input type="text" name="name" placeholder="请输入名字" />
  <input type="password" name="password" placeholder="密码"/>
 </form>
<button type="button" id="submitAdd">确认</button>

로그인 후 복사

jquery 비동기 처리

 $("#submitAdd").click(function(){
    
   var targetUrl = $("#addForm").attr("action");    
   var data = $("#addForm").serialize();     
    $.ajax({ 
     type:&#39;post&#39;,  
     url:targetUrl, 
     cache: false,
     data:data,  
     dataType:&#39;json&#39;, 
     success:function(data){      
       alert(&#39;success&#39;);
     },
     error:function(){ 
      alert("请求失败")
     }
    })
    
 })

로그인 후 복사

2 , 파일이 포함된 Ajax 제출 데이터:

html: 양식 양식

파일 업로드가 있는 양식 양식은

<form id="addForm" action="${pageContext.request.contextPath}/admin/saveAdd" method="post"enctype=" multipart/form-data">    
  <input type="text" name="name" placeholder="请输入名字" />
  <input type="password" name="password" placeholder="密码"/>
  <input type="file" name="avatar" />
 </form>
<button type="button" id="submitAdd">确认</button>

로그인 후 복사

jquery 비동기 처리

$("#submitAdd").click(function(){
    
   var targetUrl = $("#addForm").attr("action");    
   var data = new FormData($( "#addForm" )[0]);     
    $.ajax({ 
     type:&#39;post&#39;,  
     url:targetUrl, 
     cache: false,    //上传文件不需缓存
     processData: false, //需设置为false。因为data值是FormData对象，不需要对数据做处理
     contentType: false, //需设置为false。因为是FormData对象，且已经声明了属性enctype="multipart/form-data"
     data:data,  
     dataType:&#39;json&#39;, 
     success:function(data){      
       alert(&#39;success&#39;);
     },
     error:function(){ 
      alert("请求失败")
     }
    })
    
 })

로그인 후 복사

위는

양식을 사용하여 FormData 개체를 구성하는 것입니다. 다음:

html: 양식이 없습니다.

<p id="uploadFile">
 <input id="file" name="avatar" type="file"/>
 <button id="upload" data-url="/admin/upload" type="button">上传头像</button>
</p>

로그인 후 복사

jquery 비동기 처리:

$("#upload").click(function(){
    
   var targetUrl = $(this).attr("data-url");    
   var data = new FormData();
   //FormData对象加入参数
   data.append(&#39;file&#39;, $(&#39;#file&#39;)[0].files[0]); //&#39;file&#39; 为参数名，$(&#39;#file&#39;)[0].files[0])获取上传的文件，如果需上传多个文件，要在<input>标签加上属性multiple    
    $.ajax({ 
     type:&#39;post&#39;,  
     url:targetUrl, 
     cache: false,    
     processData: false, 
     contentType: false, 
     data:data,  
     dataType:&#39;json&#39;, 
     success:function(data){      
       alert(&#39;success&#39;);
     },
     error:function(){ 
      alert("请求失败")
     }
    })
    
 })

로그인 후 복사