javascript - 使用 ajax 和 jquery javascript 重复结果

Question

美好的一天，我想通过ajax制作一个javascript，当我将鼠标悬停在按钮上时 它将获取其 id 和值，然后该值将传递到同一页面内的 php 脚本上，用作搜索我选择的位置的变量

这是我尝试过的 JavaScript

<script>


        function b1(a){




        $(".btn").hover(function() {
            $.ajax({
                type: 'post',
                url: 'zone.php',
                data: {mapname: a.value},
                success: function(data){
                    document.write(data);
                }
            });
        });

        $(document).ready(function(){
            $(".btn").hover(function(){
                $("#box").toggle();
            });
        });
        }

    </script>

这是按钮

    <div class="container">
<button class="btn btn-danger" id="ilocos" value="Ilocos" onmouseover="b1(this);" style="border-radius: 0% 0% 100% 100%;">Ilocos</button>
        <button class="btn btn-danger" id="cagayan" value="Cagayan" onmouseover="b1(this)" style="border-radius: 0% 0% 100% 100%;">Cagayan</button>
    </div>

然后我有一个 div，当按钮悬停时我想切换它，其中包含数据库中的 php 代码

<div id="box">
<?php
    if(empty($_POST['mapname'])){

    }else{


    $tempmapnam = $_POST['mapname'];

    $con = mysqli_connect("localhost","root","","fsqm");
    $sql = "Select map_name, map_zh, map_zhc from tbl_map where map_name='".$tempmapnam."'";

    $result = mysqli_query($con, $sql)
        or die ("Failed to query database".mysql_error());
    if(mysqli_num_rows($result)>0){
        echo "<table class=\"table table-hover table-condensed\"><thead><th>Location</th><th>Zone Head</th><th>Contact</th></thead><tbody>";
        while($row = mysqli_fetch_assoc($result)){
            echo "<tr>
                <td>".$row["map_name"]."</td>
                <td>".$row["map_zh"]."</td>
                <td>".$row["map_zhc"]."</td>
                </tr>";
        }
        echo "</tbody></table>";
    }else{
        echo "No Data found";
    }
    $con->close();

    }
?>
</div>

我昨天刚开始使用 javascript 和 ajax，所以请耐心等待，它确实有效，问题是它重复了页面内的整个 2 个 div

Answer 1

请看下面的代码。我没有数据库，这就是我使用硬编码值的原因，您可以在那里使用动态值。 您必须检查代码执行的顺序，具体取决于您的代码将被执行。您必须使用 exit() 因为我们使用同一页面进行 ajax 请求。使用 Jquery 文件路径。首先，您必须采用空白 div“框”，ajax 将返回动态响应(根据 map 名称更改的值)，该响应应使用 jquery 转储到 div 中，或者您也可以使用 javascript。您必须根据您的 mysql 版本仅使用 mysqli

<script type="text/javascript" src="../jquery-1.11.0.min.js"></script>
<script>
function b1(a)
{    
    $.ajax({
        type: 'post',
        url: 'zone.php',
        data: {mapname: a.value,action:'getdata' },
        success: function(data){
            $('#box').html(data);
        }
    });
}
</script>

<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "admin";
$dbname = "dbtest";
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die ("Error connecting to database");
mysql_select_db($dbname);
if(isset($_POST['action']))
{    
    $tempmapnam = $_POST['mapname'];
    $sql = "Select map_name, map_zh, map_zhc from tbl_map where map_name='".$tempmapnam."'";
    $result = mysql_query($sql) or die ("Failed to query database".mysql_error());
    if(mysql_num_rows($result)>0){        
        $out= "<div style=\"z-index: -1; width: 500px; height: 500px; posision: absolute; top: 0px;\"><table class=\"table table-hover table-condensed\"><thead><th>Location</th><th>Zone Head</th><th>Contact</th></thead><tbody>";
        while($row = mysql_fetch_assoc($result)){
                $out.= "<tr>
            <td>".$row["map_name"]."</td>
            <td>".$row["map_zh"]."</td>
            <td>".$row["map_zhc"]."</td>
            </tr>";
        }
        $out.=  "</tbody></table></div>";
        print $out;
        exit();
    }   
}
?>
<button class="btn btn-danger" id="ilocos" value="Ilocos" onmouseover="b1(this);" style="border-radius: 0% 0% 100% 100%;">Ilocos</button>
<button class="btn btn-danger" id="cagayan" value="Cagayan" onmouseover="b1(this)" style="border-radius: 0% 0% 100% 100%;">Cagayan</button>
<div id="box"></div>