вызов AJAX перезагружает текущую страницу

Я пытаюсь периодически обновлять div информацией, полученной от сервера. Код ниже получит правильную информацию с сервера, добавит ее в текст divs, а затем перезагрузит страницу/очистит div.вызов AJAX перезагружает текущую страницу

<?php 
session_start(); 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta content="en-us" http-equiv="Content-Language" /> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<script type='text/javascript'> 

function exec(command){ 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      document.getElementById("txtHint").innerHTML = document.getElementById("txtHint").innerHTML + "<br/><br/>" + xmlhttp.responseText; 
      alert(xmlhttp.responseText); 
     } 
    } 
    xmlhttp.open("GET", "HAS-sync.php", true); 
    xmlhttp.send() 
} 
</script> 
<style type="text/css"> 
.auto-style1 { 
    margin-top: 0px; 
} 
</style> 
</head> 

<body> 

<table style="width: 100%"> 
    <tr> 
     <td style="width: 141px; height: 390px">Managers<br /> DHTs</td> 
     <td name="targetThing" style="height: 390px"> 
      <form onsubmit="exec()"> 
       <input class="auto-style1" name="Text1" type="text"> 
       <input type="submit"> 
      </form> 
      <br /> 
      <div id="txtHint" style="border:1px solid black;width:50%;height:50%"></div> 
     </td> 
    </tr> 
</table> 

</body> 

</html>

Как я могу получить, что это просто добавить результат вызова Ajax к тексту дивы, а не очищая его полностью?

источник

2015-04-24 Joshua Purdy

'onsubmit' является одной из форм действий, а не ввод действий. Ваша форма должна «возвращать false» (и эта привязка должна фактически находиться в теге '

Извините, я отправил предыдущую версию этого файла при запросе вопроса. Я написал это для добавления данных вместо замены, и onsubmit теперь находится в теге формы. Он все еще очищает все от div, когда окно предупреждающего сообщения закрыто. –

ajax calls не обновляет страницу. –

Сначала переместите onsubmit в тег формы вместо ввода, как сказано в комментарии.

<form onsubmit="updateTxt(this.value);return false">

Вы должны добавить текст ответа, а не перезаписывать, что уже в innerhtml.

document.getElementById("txtToUpdate").innerHTML += xmlhttp.responseText;

источник

2015-04-24 17:42:06

Помещение возврата false в тег формы решило его. Благодаря! –

Прямо сейчас, вы перезапись HTML, используя = назначение. Вы должны добавить его, вместо того, чтобы, используя +=:

document.getElementById("txtToUpdate").innerHTML += xmlhttp.responseText;

источник

2015-04-24 17:43:15

Вы должны return false в вашем onsubmit обработчика так что браузер знает, что вы обработал запрос, и это не должно продолжаться. Это может быть сделано несколькими способами:

Добавить return false; после exec() в вашем связывания:

<form onsubmit="exec();return false;"><!-- ... --></form>

или корректируете связывание быть return exec() и есть метод return false;:

<script> 
    function exec(){ 
    /* ... */ 
    return false; 
    } 
</script> 
<form onsubmit="return exec()"><!-- ... --></form>

As в стороне, вам следует рассмотреть возможность отказаться от привязки javascript с использованием атрибутов и начать использовать addEventHandler (и аналогично), чтобы обеспечить четкое разделение проблем.

источник

2015-04-24 17:43:35

Применение

var txtToUpdate = document.getElementById("txtToUpdate"); 
txtToUpdate.innerHTML = txtToUpdate.innerHTML + xmlhttp.responseText;

источник

2015-04-24 17:44:09 devconcept

вызов AJAX перезагружает текущую страницу

ответ

Смежные вопросы