HTMLとしてのAjaxレスポンス

Question

page1.phpの送信ボタンをクリックすると、レスポンスは一瞬HTML形式で出力されますが、自動的に削除されます。

id="output"要素にpage2.phpの応答をページ1に表示したいとします。

私は間違っていますか？ここで

は、ページがさわやかで、削除されていない page2.php

<?php echo "<table align='center'>" 
    ."<tr>" 
    ."<td>"."Mr XYZ"."</td>" 
    ."<td>"."MALE"."</td>" 
    ."<td>"."987558745"."</td>" 
    ."<td>"."xyz@gmail.com"."</td>" 
    ."</tr>"; 
?> 

Answer 1

応答のpage1.php

<script type="text/javascript"> 
    function func(tosearch) { 
     alert("search"); 

     $.ajax({ 
      type: 'post', 
      url: 'page2.php', 
      data: { 
       'tosearch' : tosearch 
      }, 
      success: function(result) { 
       print(result); 
      } 
     }); 
    } 

    function print(result) { 
     document.getElementById("output").innerHTML=result; 
    } 
</script> 

<form method="post" action="page1.php"> 
    <input type="text" name="search" placeholder="Search.."><br><br> 
    <input type="submit" name="submit" onclick="func()"> 
</form> 
<p id="output">table here!!</p> 

コンテンツの内容です。ページをまったくリフレッシュしたくないので、実際にはform要素は必要ありません。ただ、マークアップをシンプルに保つためにinput平野buttonをformを削除します

<script> 
    // your JavaScript 
</script> 
<input type="text" name="search" placeholder="Search.."><br><br> 
<button onclick="func()">  
<p id="output">table here!!</p>