ajax在我的页面内打印我的页面[重复]

This question is an exact duplicate of:

i want to write a code so when the i insert a character inside my form, then users(in my database) who their names start with the character i inserted show up(like if facebook) but my problem is when i insert a character, instead of just printing the users names, my page xeroxes in that section like this: (i know that i have asked this question once but i didn't get any answer and i really have to solve this problem)

enter image description here

here goes my code:

<div id="mymessages">

<div>
<br><br>
<div style="display:inline; border:1px solid gray; margin-left:8px;" onClick="myinbox()"><b>پیام های من</b></div>
<div style="display:inline; border:1px solid gray; margin-left:8px;"><b onClick="sendnewmsg()">ارسال پیام جدید</b></div>
</div>


<script>



function myinbox(){
        document.getElementById("myinbox").style.display="block";
        document.getElementById("sendnewmsg").style.display="none";
}
function sendnewmsg(){
    document.getElementById("sendnewmsg").style.display="block";
    document.getElementById("myinbox").style.display="none";
}
</script>


<div id="sendnewmsg">

<form enctype="multipart/form-data" id="sendmessage" style="text-align:center;" name="sendmessage" method="post" action="userpanel.php">

TO: <input onKeyUp="selrec(this.value)" type="text" id="receiver" name="to"><br><br>

<script>
function selrec(name)
{
    if(name.length==0)
    {
    document.getElementById('selectrec').innerHTML="no suggestion";
    return;
    }
    if(window.XMLHttpRequest)
     myrequest=new XMLHttpRequest();
    else
     myrequest=new ActiveXObject("Microsoft.XMLHTTP");

    myrequest.onreadystatechange=function()
    {
     if (myrequest.readyState==4 && myrequest.status==200) 
     {
       document.getElementById('selectrec').innerHTML=myrequest.responseText;
     }
    }
    myrequest.open("GET","userpanel.php",true);
    myrequest.send("typedname="+name);
}
</script>

<div id="selectrec">

<?php
if(isset($_POST['typedname'])){
 $conn=mysqli_connect('localhost','root');
 if (!$conn)
  die("couldn't connect" . mysql.error());
 $typedname=$_REQUEST['typedname'];
 mysqli_select_db($conn,'swimsafe');
 $bringusers='SELECT * FROM users WHERE firstname LIKE"'.$typedname.'%" OR lastname LIKE"'.$typedname.'%" LIMIT 3';
 $getuserstyped=mysqli_query($conn,$bringusers);
 if(!$getuserstyped)
 die("couldn't choose the users" .mysql_error());
 while($rows=mysqli_fetch_array($getuserstyped))
 {
     echo $rows['firstname'] . " " . $rows['lastname'];
 }
 mysqli_close($conn);
}
?>

</div>

SUBJECT: <input type="text" name="subject" ><br><br>
CONTENT:<br> <textarea form="sendmessage" style="height:150px; width:300px;" name="content">
</textarea>
<br><br>
<input type="submit" onClick="return checkreciever()" id="submitmsg" name="submit" value="send">





</form>


</div>

</div>

Problem

I believe you have two issues:

1) Mixing GET and POST

2) The php section of your file needs to come before the html output, and it needs to terminate before the html is outputted if an ajax query is done.

To solve 1), instead of

if(isset($_POST['typedname'])) ...

try

if(isset($_GET['typedname']))...

Let me show you a more basic example of your problem - a button that makes a simple ajax call to the server, and outputs what the server has to say

<html>
    <head>
        <script language="javascript">
            function ajaxStuff() {
                var result = //code to get response from server (you already get this)
                             //this code posts the typedname like in your code
                alert(result);
            }
        </script>
    </head>
    <body>
        <button name="ajax-button" onclick="ajaxStuff()">Click me to do ajax stuff!</button>
    </body>
</html>
<?php
if (isset($_GET['typedname'])) {
    echo "Hello, I am the server!";
}
?>

Now when we click the button we want javascript to alert us with the string "Hello, I am the server!" But this won't happen. Instead, you'll get the entire output of the page followed by the string "Hello I am the server!"

Why? All your html code, including and between the html tags, will be output before the php code whenever userpanel.php is queried. Then the server will see that $_GET['typedname'] is set, and spit out the "Hello..." string as well.

Solution

In case of an ajax query, you want to be able to PREVENT the server's html output, and only allow it to output a string. This means that your php code needs to come before the html, and in the case of an ajax query, should simply exit before the html is outputted:

<?php
if (isset($_GET['typedname'])) {
    echo "Hello, I am the server!";
    exit; //THIS IS THE CRUCIAL EXIT STATEMENT. 
          //It will stop the script here, with no html output.
}
?>
<html>
    <head>
        <script language="javascript">
            function ajaxStuff() {
                var result = //code to get response from server (you already get this)
                             //this code posts the typedname like in your code
                alert(result);
            }
        </script>
    </head>
    <body>
        <button name="ajax-button" onclick="ajaxStuff()">Click me to do ajax stuff!</button>
    </body>
</html>

And there you have it!