为什么ajax在php中复制整个页面

时间:2016-11-17 07:03:32

标签: php jquery html mysql ajax

我连接到mysql数据库,我想在用户点击按钮后用php生成带有mysql内容的表。

但是点击一个按钮后,整个页面会生成带有标题,正文等的div,这些是表格和php脚本。当然,按钮也会在视觉上重复。

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-2">
  <meta http-equiv="content-language" content="cs">
  <meta name="author" content="Marek Ciz, Tomas Veskrna">
  <meta name="keywords" content="galerie, iis, iis projekt 2016, informacni system">
  <link rel="icon" type="image/png" href="./icons/gallery.png" />
  <title>Employee</title>
  <link rel="stylesheet" type="text/css" href="./mystyle.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $("#expo-but").click(function(){

        $.ajax({
          url: "./employee.php",
          type: "post",
          data: {action: "exposition"},
          success: function(result) {
                $("#table").html(result);
        }});
    });
});
</script>

</head>
  <body>

  <div class="page">
   <div class="menu">
    <button id="expo-but">Exposition</button>
   </div>
  <div id="table-wrapper">
    <div id="table">
        <table class="striped">
            <thead>
                <tr class="header">
                    <td>Id</td>
                    <td>Name</td>                       
                </tr>
            </thead>
            <tbody>             
                <?php
                    include './db_init.php';

                    //echo $_SESSION["user"];

                    if(isset($_POST['action'])){   
                        if($_POST['action'] == "exposition") {
                            $sql = "SELECT  id_zamestnance, jmeno FROM Zamestnanec";
                            $result = mysql_query($sql)or die(mysql_error());

                            while ($row = mysql_fetch_assoc($result)) {
                                echo "<tr>";
                                echo "<td>".$row[id_zamestnance]."</td>";
                                echo "<td>".$row[jmeno]."</td>";                                                                    
                            }                           
                        }                           
                    }
                ?>
            </tbody>
        </table>
    </div>
</div>
</div>
</body>
</html> 

3 个答案:

答案 0 :(得分:2)

剪切此代码并将此代码添加到页面顶部

<?php
                include './db_init.php';

                //echo $_SESSION["user"];

                if(isset($_POST['action'])){   
                    if($_POST['action'] == "exposition") {
                        $sql = "SELECT  id_zamestnance, jmeno FROM Zamestnanec";
                        $result = mysql_query($sql)or die(mysql_error());

                        while ($row = mysql_fetch_assoc($result)) {
                            echo "<tr>";
                            echo "<td>".$row[id_zamestnance]."</td>";
                            echo "<td>".$row[jmeno]."</td>";                                                                    
                        }                           
                    }  
 exit();                         
                }
            ?>

答案 1 :(得分:2)

更正确的解决方案将分开htmlphp部分: -

你的HTML应该是这样的: -

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-2">
  <meta http-equiv="content-language" content="cs">
  <meta name="author" content="Marek Ciz, Tomas Veskrna">
  <meta name="keywords" content="galerie, iis, iis projekt 2016, informacni system">
  <link rel="icon" type="image/png" href="./icons/gallery.png" />
  <title>Employee</title>
  <link rel="stylesheet" type="text/css" href="./mystyle.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
   $(#expo-but).trigger("click");  // on document ready trigger click itself so that table will load initially
    $("#expo-but").click(function(){

        $.ajax({
          url: "./employee.php",
          type: "post",
          data: {action: "exposition"},
          success: function(result) {
                $("#table").html(result);
        }});
    });
});
</script>

</head>
  <body>

  <div class="page">
   <div class="menu">
    <button id="expo-but">Exposition</button>
   </div>
  <div id="table-wrapper">
    <div id="table">

    </div>
</div>
</div>
</body>
</html>

php(employee.php)将是这样的: -

<?php
    include './db_init.php';

    //echo $_SESSION["user"];
    $data = '';
    if(isset($_POST['action'])){   
        if($_POST['action'] == "exposition") {
            $sql = "SELECT  id_zamestnance, jmeno FROM Zamestnanec";
            $result = mysql_query($sql)or die(mysql_error());

            while ($row = mysql_fetch_assoc($result)) {
                $data .= "<tr>";
                $data .="<td>".$row[id_zamestnance]."</td>";
                $data .="<td>".$row[jmeno]."</td>";                                                                    
            }                           
        }                           
    }


$final_data = '<table class="striped"><thead><tr class="header"><td>Id</td><td>Name</td></tr></thead><tbody>'.$data.'</tbody></table>';

echo $final_data;

?>

注意: -

为什么我说的更正确,因为在你的php页面中你也有与你当前的html div中写的相同的代码,所以不需要重复。

只需在文档加载时调用按钮的单击功能,就是这样。

答案 2 :(得分:2)

这是我们大多数人的正常错误,我建议你请求另一个php页面而不是请求同一页面。

<强> table.php

    <table class="striped">
        <thead>
            <tr class="header">
                <td>Id</td>
                <td>Name</td>                       
            </tr>
        </thead>
        <tbody>             
            <?php
                include './db_init.php';

                //echo $_SESSION["user"];

                if(isset($_POST['action'])){   
                    if($_POST['action'] == "exposition") {
                        $sql = "SELECT  id_zamestnance, jmeno FROM Zamestnanec";
                        $result = mysql_query($sql)or die(mysql_error());

                        while ($row = mysql_fetch_assoc($result)) {
                            echo "<tr>";
                            echo "<td>".$row[id_zamestnance]."</td>";
                            echo "<td>".$row[jmeno]."</td>";                                                                    
                        }                           
                    }                           
                }
            ?>
        </tbody>
    </table>

并更改scrtipt中的网址

<script>

(文档)$。就绪(函数(){     $( “#博览会-但”)。单击(函数(){

    $.ajax({
      url: "./table.php",
      type: "post",
      data: {action: "exposition"},
      success: function(result) {
            $("#table").html(result);
    }});
});

});