Ajax 响应为 HTML

Question

单击 page1.php 上的提交按钮时，响应会暂时以 HTML 格式打印，但会自动删除。

我想在 id="output" 元素中显示 page1 中 page2.php 的响应。

我做错了什么？

这里是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>

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

没有删除回复，正在刷新页面。由于您根本不希望页面刷新，因此您实际上并不需要 form 元素。只需删除 form 并将 input 设为普通 button 以保持标记简单：

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

Ajax 响应为 HTML

Ajax Response as HTML

html

javascript

php

ajax

response