Ajax响应为HTML

When the submit button is clicked on page1.php the response is printed as HTML format for a moment but it gets automatically deleted.

I want to display the response of page2.php in page1 in the id="output" element.

What am I doing wrong?

Here is the content of 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>

Content of page2.php

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

The response isn't being deleted, the page is refreshing. Since you don't want the page to refresh at all, you don't really need that form element. Just remove the form and make the input a plain button to keep the markup simple:

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