Ajax попытка выполнить PHP страница переносит меня на новую страницу - PullRequest
Новая
       34

Ajax попытка выполнить PHP страница переносит меня на новую страницу

0 голосов
/ 13 января 2020

Я пытаюсь настроить работу чата с использованием PHP и mysql и AJAX. Он почти полностью функционирует, за исключением того, что я не могу понять, как отправить сообщение чата без перезагрузки страницы. У меня есть страница sendchat. php, которая принимает данные с предыдущей страницы и вводит данные в базу данных. Я пытаюсь использовать поле ввода текста, и когда пользователь нажимает клавишу ввода, он запускает страницу PHP с информацией, необходимой для отправки в sendchat. php без фактической загрузки или обновления страницы. Это то, что у меня есть: 

 <form id="send-message-area">
            <p>Your message: </p>
            <input type="text" id="sendie" maxlength = '100' onkeydown="onChatEnter(this);"></textarea>
        </form>

    </div>
    </td></tr></table>


 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">



 function onChatEnter(str) {
      if(event.key === 'Enter') {

   $.ajax({
                type: "GET",
                url: "sendchat.php?msg=" + str ,
                                success : function() { 

                    // here is the code that will run on client side after running clear.php on server



                }
            });

}

 </script>

Все, что он делает, это пытается загрузить URL-адрес, но не пытается найти sendchat. php или отправить данные. Вместо этого он просто пытается загрузить пустую страницу. Куда я здесь не так? Кажется, все написано правильно и чувствительно к регистру. Я проверяю, нажал ли пользователь ввод, когда нажал клавишу. Если они это сделали, я загружаю AJAX функцию для выполнения PHP страницы. Тем не менее, он этого не делает. Я просто не хочу, чтобы там нажимали кнопку.

РЕДАКТИРОВАТЬ:

Я попробовал предложения ниже и до сих пор ничего. Я решил попробовать другой подход сейчас. Все еще не работает. 

<script>
function updatechat(str) {
    if(event.key === 'Enter') {

    if (str=="") {
    document.getElementById("sendie").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("sendie").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","sendchat.php?msg="+str,true);
  xmlhttp.send();

    }
}
</script>

 <p>Your message: </p>
            <input type="text" id="sendie" maxlength = '100' onkeypress="updatechat(this.value);"></input>

Ответы [ 2 ]

0 голосов
/ 13 января 2020

Я не уверен, как .. Но я исправил это .. Я думаю, что это было связано с присвоением ввода имени вместе с идентификатором. См. Ниже: 

 <script language="javascript" type="text/javascript">
  function updatechat(str) {
    if(event.key === 'Enter') {


    if (str=="") {
    document.getElementById("sendie").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();

  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {

    if (this.readyState==4 && this.status==200) {
      document.getElementById("sendie").innerHTML=this.responseText;

    }
  }
  var planetloc = document.getElementById("loc").value;
chaturl = "sendchat.php?msg="+str+"&loc="+planetloc;
sendie.value="";

  xmlhttp.open("GET",chaturl,true);
  xmlhttp.send();

    }
}
//-->
</script>

Этот код я использовал для html: 

<p>Your message: </p>
            <input type='text' id='sendie' name='sendie' maxlength = '100' onkeypress='updatechat(this.value);'></input>
            <input type='hidden' id='loc' name='loc' value='$chatroom'></input>";

Я также добавил chaturl, чтобы объединить нужную мне страницу ajax вместе с параметры, переданные ему. Кажется, создав переменную, она решает и другие проблемы.

0 голосов
/ 13 января 2020

Попробуйте это: 

$("#send-message-area").submit(function(e) {
    e.preventDefault();
    e.stopPropagation(); 
});
...