Загрузить динамический контент из php при отправке формы

Question

Я создал страницу «index.php» с большим количеством div и мне нужно обновить только один из div при отправке формы.

Этот Див загружает содержимое из chat_window.php, который выглядит следующим образом:

<div id="chatbox"> 
    <?php echo $res; ?> 
</div> 

<!-- Chat user input form--> 
<?php echo $formchat; ?> 

chat_window.php использует динамический контент - $res и $formchat от chat.php. Каждый раз, когда я отправляю форму, содержимое $ res и $ formchat изменяется, и мне нужно отражать то же самое на моей странице, которая загружает chat_window.php.

Я использовал AJAX и JQuery, чтобы сделать то же самое в следующем:

$(document).ready(function() { 
    $("#submit").click(function() { 
     var name = $("input#chat").val(); 
     var dataString = "chat="+ name; 

     $.ajax({ 
      type: "POST", 
      url: "programo/bot/chat.php", 
      data: dataString, 
      success: function() { 
      } 
     }); 

     $("#chatwrapper").load(chat_window.php); 

     return false; 
    }); 
}); 

index.php есть DIV, чтобы показать chat_window следующим образом:

<!-- Chat window--> 
<div id="chatwrapper"> 
    <?php include ("chat_window.php"); ?> 
</div> 

согласно моему анализу, когда Я публикую форму, $ res и $ formchat обновляются в php. Но когда я загружаю chat_window.php, он не загружает измененные значения. Он скорее загружает начальные статические значения. (Пожалуйста, не предлагайте setInterval(), так как я не хочу обновлять страницу автоматически).

Answer 1

Я получил свою работу. Хотя я использовал другой способ сделать это.

То, что я понял после нескольких дней R & D, заключается в том, что при отправке формы на php запрос отправляется с входными параметрами. Когда ваш php-файл обрабатывает этот запрос, он может обновлять некоторые глобальные переменные. Он завершает обработку запроса и возвращает элемент управления обратно на вызывающую страницу index.php.

Важное замечание: Изменения переменной, сделанные при обработке запроса на отправку формы, не сохраняются после возврата элемента управления. Глобальные переменные php будут обновляться только после обновления страницы.

Итак, если существует строгое требование избегать обновления страницы, собирайте обработанные данные из php в некоторой строке вывода и передайте его обратно в индекс.PHP, как это:

$responseString = $res . "|" . $formchat; 
echo $responseString; 

Параметр Успех .ajax получит этот вывод и, соответственно, вы можете обновить окно чата или любой другой формы.

Answer 2

Javascript не блокирует, поэтому это означает, что интерпретатор не дожидается завершения заданий до обработки следующего.

В вашем коде $("#chatwrapper").load('chat_window.php'); вызывается в значительной степени до того, как запрос ajax над ним завершен. Вам нужно будет использовать событие успеха ajax, чтобы вызвать перезагрузку.

Try:

$.ajax({ 
    type: "POST", 
    url: "programo/bot/chat.php", 
    data: dataString, 
    success: function() { 
    $("#chatwrapper").load('chat_window.php'); 
    } 
}); 

Answer 3

Попробуйте переместить .load() заявление в Ajax обработчик успеха:

$.ajax({ 
    type: "POST", 
    url: "programo/bot/chat.php", 
    data: dataString, 
    success: function() { 
     $("#chatwrapper").load("chat_window.php"); 
    } 

}); 

$.ajax() вызов асинхронный,, что означает, что выполнение не приостанавливает ожидания ответа скорее, он переходит непосредственно к вызову .load(). (Который также является асинхронным, так что действительно у вас нет гарантии о том, что ответ будет получен от каждого звонка, если вы не сделаете второй звонок до окончания первого.)