jquery+ajax는 양식 데이터의 비동기 제출을 구현합니다.

이번에는 양식 데이터의 비동기 제출을 구현하는 jquery+ajax와 양식 데이터의 비동기 제출을 구현하는 jquery+ajax를 가져왔습니다. Notes다음은 실제 사례입니다. 살펴보겠습니다.

jquery의 ajax 메서드를 사용하여 양식을 비동기적으로 제출하면 json 데이터가 백그라운드에서 반환되고 콜백 함수는 비동기 목적을 달성하기 위해 페이지를 새로 고치지 않고 이를 처리합니다. 양식에서 처리된 데이터는 serialize() 메서드를 사용하여 직렬화할 수 있습니다. 제출된 데이터에 파일 스트림이 포함되어 있으면 FormData 개체를 사용해야 합니다.

파일 없이 양식 데이터 사용: var data = $(form).serialize();

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

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

HTML: 양식

 <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:'post',  
     url:targetUrl, 
     cache: false,
     data:data,  
     dataType:'json', 
     success:function(data){      
       alert('success');
     },
     error:function(){ 
      alert("请求失败")
     }
    })
    
 })

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

HTML: 양식

파일 업로드

가 있는 양식은

태그에 enctype="multipart/form-data" 속성을 추가해야 합니다.

<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:'post',  
     url:targetUrl, 
     cache: false,    //上传文件不需缓存
     processData: false, //需设置为false。因为data值是FormData对象，不需要对数据做处理
     contentType: false, //需设置为false。因为是FormData对象，且已经声明了属性enctype="multipart/form-data"
     data:data,  
     dataType:'json', 
     success:function(data){      
       alert('success');
     },
     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('file', $('#file')[0].files[0]); //'file' 为参数名，$('#file')[0].files[0])获取上传的文件，如果需上传多个文件，要在<input>标签加上属性multiple    
    $.ajax({ 
     type:'post',  
     url:targetUrl, 
     cache: false,    
     processData: false, 
     contentType: false, 
     data:data,  
     dataType:'json', 
     success:function(data){      
       alert('success');
     },
     error:function(){ 
      alert("请求失败")
     }
    })
    
 })

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

jQuery를 사용하여 프런트엔드 검색 구현

jquery는 드롭다운 상자에서 값을 선택하여 텍스트 상자에 계산됩니다.

jQuery zTree는 비동기 프로세스

jQu ery 페이지 요소를 동적으로 제어하는 ​​방법

위 내용은 jquery+ajax는 양식 데이터의 비동기 제출을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!