페이지를 새로 고치지 않고 데이터를 제출하고 양식을 아래에 게시하십시오.

Question

누군가 양식 아래에 제출 한 후 데이터를 표시하는 방법을 알고 있습니까? 데이터를 저장할 함수와 같은 코드가 있지만 데이터를 저장 한 후에 아래에 양식이 표시됩니다. 나는 facebook 게시 벽처럼 생각합니다.

<script type="text/javascript" > 
$(function() { 
    $(".submit").click(function() { 
     var name = $("#name").val(); 
     var username = $("#username").val(); 
     var password = $("#password").val(); 
     var gender = $("#gender").val(); 
     var dataString = 'name='+ name + '&username=' + username + '&password=' + password + '&gender=' + gender; 

     if(name=='' || username=='' || password=='' || gender=='') 
     { 
      $('.success').fadeOut(200).hide(); 
      $('.error').fadeOut(200).show(); 
     } 
     else 
     { 
      $.ajax({ 
       type: "POST", 
       url: "result.php", 
       data: dataString, 
       success: function(){ 
        $('.success').fadeIn(200).show(); 
        $('.error').fadeOut(200).hide(); 
       } 
      }); 
     } 
return false; 
}); 


}); 
    </script> 

Answer 1

아약스 리퀘스트가 성공하면 지정된 HTML 요소 (div, span 등)에 응답을 추가하기 만하면됩니다.

$.ajax({ 
      type: "POST", 
      url: "result.php", 
      data: dataString, 
      success: function(response){ 

       $('.success').fadeIn(200).show(); 
       $('#response').append(response); 
       $('.error').fadeOut(200).hide(); 
      } 
     }); 

응답이 지정된 HTML 요소에 추가됩니다.