необычное поведение AJAX

Question

Вот мой HTML

<form id="the_form"> 
      Zip/Postal Code: <input id="zip" type="text" name="zip"><br/> 
      <input type="submit" value="Submit" id="submitButton"> 
</form> 


<div id="output"></div> 

Вот мой JQuery

<script type="text/javascript"> 
    $("document").ready(function() { 

    $("#submitButton").on("click",function(){ 

    var value_to_send_to_php = $.trim($("#zip").val()); 

     if(value_to_send_to_php != "") { 

       $.post("formphptoajax_rb.php", $("#the_form").serializeArray() , function(data) { 
        //#1 doesn't work here 
       }); 
        //#2 doesn't work here   
     }  
        //#3 doesn't work here 
    }); 

     $("#output").text("success"); 

    }); 
</script> 

выше JQuery работает отлично. То есть, щелкнув submit, я получаю «успешный» вывод в div с идентификатором «output».

Что я не могу понять, так это то, почему я не получаю такой же результат, когда я размещаю $("#output").text("success"); в местах, помеченных # 1, # 2 или # 3.

В # 1 и # 2 я не получаю выход. На # 3 я получаю «успех» на долю секунды, а затем исчезает.

Answer 1

Как и обработчик кликов, страница также отправляется с тех пор, как вы нажали кнопку «отправить».

Используйте вместо этого тип ввода = «кнопка». Это то, для чего оно предназначено для: кнопки без отправки.

Answer 2

Вам нужно сделать e.preventDefault() или вернуть false из вашего обработчика. Кроме того, то, что у вас там, покажет успех при загрузке, а не после нажатия кнопки.

Answer 3

Хорошо, давай прямо. Я полагаю, что $ .post вызывает AJAX async callback (, это важно, потому что, если вы не хотите обратного вызова ASYNC, я плохо понял ваш вопрос, а мои выводы ошибочны).

<script type="text/javascript"> 

    $("document").ready(function() { 

    $("#submitButton").on("click",function(){ 

     var value_to_send_to_php = $.trim($("#zip").val()); 

     if(value_to_send_to_php != "") { 

     // - ok, we have "#zip" value filled, so let's take "#the_form" data and sends them asynchronously to server 

     $.post("formphptoajax_rb.php", $("#the_form").serializeArray() , function(data) { 
      //#1 doesn't work here 

      // - great, our AJAX callback was successful, so we can inform user, that save or whatever operation was successfull 
      // - now we can process "data" returned from server 
      // - and we can show the success message - $("#output").text("success"); 

      // BUT, all this will happen only, when you prevent page from full postback (which refresh the whole page) 
     }); 

     //#2 doesn't work here   


     } 

     //#3 doesn't work here 

     // - in this place you have to prevent page from continue submitting (therefore full page postback is initiated) 
     // - so there should be "return false;" (without quotes of course) 
     // - or you can use "e.preventDefault();" here (as someone already mentioned), but in that case you have to change your click event handler signature from "function()" to "function(e)" 
    }); 

    $("#output").text("success"); 

    }); 

</script> 

Упрощенная postback вызывается при нажатии кнопки передачи - браузер принимает данные формы и обновить страницу (в то время как данные формы отправки на сервер как запрос Params). Это синхронный запрос HTTP POST. Ну, термин «PostBack» используется в основном в ASP или ASP.NET.

Что касается «исходного контекста не существует во время завершения ajax» - я имею в виду, что при отправке асинхронного обратного вызова на сервер, но сразу после этого страница обновляется (из-за обратной передачи), тогда оригинал инициатор асинхронного обратного вызова больше не существует, и нет процедуры, которая может обрабатывать результат этого обратного вызова (успех или неудача).