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

将document.write(data);替换为$('#box').html(data);。删除$(".btn").hover和$(document).ready处理程序。您已经拥有一个由onmouseover属性驱动的属性。结果应该是这样的：

function b1(a){
    $.ajax({
        type: 'post',
        url: 'zone.php',
        data: {mapname: a.value},
        success: function (data) {
            $('#box').html(data);
        }
    });

    $("#box").toggle();
}

Answer 2

请查看以下代码。我没有数据库，这就是为什么我使用硬编码值，你可以使用动态值。您必须检查执行的代码序列，具体取决于您的代码将被执行。你必须使用exit（），因为我们使用相同的页面进行ajax请求。使用Jquery文件路径。首先你必须把空白div“框”和ajax返回给你的响应，它将是动态的（根据mapnames改变的值），响应应该使用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>

使用ajax和jquery javascripting重复结果

2 个答案: