JQuery에서 양식을 게시하고 DIV를 채 웁니다. IE에서 깨졌습니다.

Question

jQuery를 통해 데이터를 게시하고 동일한 DIV로 반환하는 양식을 작성하려고합니다. 이렇게하면 게시 작업에서 페이지가 새로 고침되지 않습니다.

<div id="add_value_form"> 

<form method="POST" action="#" onsubmit='return false'> 
    <!-- input fields --> 
    <input type="submit" value="Add" onclick='post_form("/add_value");'> 
</form> 

</div> 

JS 기능 :

function post_form(url) { 
    $.post(url, {'test':'test'}, function(data) { 
    $("#add_value_form").empty().append(data); 
    }, "text"); 
} 

이 FF3에서 완벽하게 작동하지만 그것은 단지 IE6/7에서 무작위로 작동합니다.

서버는 게시 요청이 IE에서 오는 것을 확인하지만 가끔씩 만 게시 데이터를받습니다.

호기심, 나는 데이터 변수를 경고하기로 결정,

확실히 충분히

$.post(url, {'test':'test'}, function(data) {alert(data);}, "text"); 

, FF3가 반환 HTML마다 시간을 인쇄 할을하면서 가끔 HTML 리턴와 IE6/7 것 주로 인쇄 공백. 나는이 문제에 관해 무엇인가를 발견 할 수 없었다. 그래서 나는 무엇을 잘못하고 있는가?

해결 : 요청 추적 코드에서 HTTP 리디렉션으로 추적했습니다. 그래서 POST 요청을 처리하는 함수는 리디렉션을 던질 것이고 IE는 그것을 좋아하지 않습니다. 나는 그 당시에 완전한 정신적 변비가 있었고 나는 리다이렉트가 실제로 필요하지 않다.

이상한 부분은 FF로 작동한다는 것이며, IE는 경우에 따라 리디렉션 기능을 사용하기도합니다.

Answer 1

이 시나리오에서는 form 태그를 전혀 사용할 필요가 없다고합니다.

<div id="add_value_form"> 
    <!-- input fields --> 
    <input type="button" value="Add" onclick='post_form("/add_value");' /> 
</div> 

편집 파올로 Bergantino 내가 또한 인라인 자바 스크립트를 사용하지 않는 것입니다 말했듯이. 그래서 그 대신 사용

<div id="add_value_form"> 
    <!-- input fields --> 
    <input type="button" value="Add" class="formSubmitButton" /> 
</div> 

자바 스크립트

$(document).ready(function() { 
    $('.formSubmitButton').click(function() { 
     $.post('/add_value', {'test':'test'}, function(data) { 
      $("#add_value_form").empty().append($(data)); 
     }, "text"); 
    }); 
}); 

업데이트를이 이후 여전히 문제를 일으키는, 나는 $.ajax 방법으로 몇 가지 테스트를 수행합니다. 또한, 나는 POST 호출이 캐시 될 것이라고 믿지 않지만, 단지 캐시 된 것을 false로 설정하려고 할 때를 대비해. 직렬화 문제가 없는지 확인하기위한 또 다른 테스트는 이미 인코딩 된 데이터를 전달하는 것입니다. 당신은 여전히 ​​문제가 있다면 당신은 실제로

$.ajax({ 
    url: '/add_value', 
    type: 'POST', 
    cache: false, 
    data: 'test=testValue', 
    dataType: 'text', 
    complete: function(xhr, textStatus) { 
    alert('completed'); 
    }, 
    success: function(data) { 
    alert(data); 
    }, 
    error: function(xhr, textStatus, errorThrown) { 
    alert('woops'); 
    } 
});