왜 내 아약스 스크립트가 내 페이지를 다시로드합니까

Question

아약스를 사용하여 양식을 제출하고 있습니다. 글쎄, 내가 사용하고있는 스크립트는 단지 평범한 텍스트가 processform.php에 에코되는 양식을 테스트하는 것이다. 그러나 제출 버튼을 클릭하면 아무 것도 알려지지 않고 페이지가 다시로드됩니다.

아니야, return false이 그것을 방지해야합니다. 그리고 아약스 부분을 삭제하면 모든 것이 잘됩니다.

어디에서 잘못 했습니까? 요소 #submit이 type="submit"있는 버튼이나 입력하면

$("#submit").click(function(){ 
     $("#sidebar .message").show(); 
     $(".sidebar-content").hide(); 

     $.ajax({ 
     type: "POST", 
     url: "processform.php", 
     data: { name: "John", location: "Boston" } 
     }).done(function(msg) { 
     alert("Data Saved: " + msg); 
     }); 

     return false; 
    }); 

Answer 1

, 그것은 가능성이 양식 조치가 될 일이 어떤 데이터를 전송하는 기본 동작을 트리거합니다.

데이터를 제출하는 기본 동작이없는 type="button" 유형을 변경하거나 클릭 핸들러에서 event.preventDefault()을 사용하여 기본 동작을 차단할 수 있습니다. 당신이 당신의 아약스 요청이 성공하면 당신의 경고가 트리거 할 경우

$("#submit").click(function(e){ 
    e.preventDefault(); 
    ... 
}); 

, 당신은 대신 .done()의 success 옵션을 사용할 수 있습니다.

$("#submit").click(function() { 
    $("#sidebar .message").show(); 
    $(".sidebar-content").hide(); 

    $.ajax({ 
     type: "POST", 
     url: "processform.php", 
     data: { 
      name: "John", 
      location: "Boston" 
     }, 
     success: function(msg) { 
      alert("Data Saved: " + msg); 
     }, 
     error: function() { 
      alert("Error occurred"); 
     } 
    }); 

    return false; 
}); 

jsfiddle

Answer 2

간단한 해결책 : = "버튼"을 입력 대신 "제출"당신의 제출 버튼을 변경합니다.