Question

我有一个程序，我正在制作一个数据库获取该数据库的前5行，并在我所做的网站上点击按钮时将其呈现给用户。我能够在单击按钮的页面上打印数据库数据，但我希望将其打印到我创建的另一个页面。到目前为止，我的代码是主页面，其中包含用于获取数据库信息的按钮和PHP代码（该文件名为file1.php）：

<div id="container">
<h2> Order Information </h2>
<div class="entry">
  Select color:
  <select name="color">
    <option selected="selected">White</option>
    <option>Black</option>
    <option>Red</option>
    <option>Green</option>
    <option>Blue</option>
  </select> <br><br>
  Select shirt size:
  <select name="sizeandprice">
    <option>Small - $9.99</option>
    <option>Medium - $10.99</option>
    <option selected="selected">Large - $11.99</option>
    <option>X-Large - $13.99</option>
  </select><br><br>
  Is this a gift? <input type="checkbox" name="gift"> <br><br>
  Write your gift message here: <br>
  <textarea disabled rows="5" cols="50" name="message">Type your message here.
  </textarea>
</div>
</div>

我的query.php文件如下：

<html>
    <head>

        <title>Testing SQL DB</title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>


    <script type = "text/javascript">
        function myAjax () {
            $.ajax( { type : 'POST',
              data : { },
              url  : 'query.php',              // <=== CALL THE PHP FUNCTION HERE.
              success: function ( data ) {
                document.getElementById("dbResult").innerHTML = data;   // Get the element with id="demo"
              },
              error: function ( xhr ) {
                alert( "error" );
              }
            });
        }
    </script>
    </head>
    <style>
        h1
        {
            text-align: center;
            font-size: 45px;
        }

        .radio-input
        {
            font-size: 35px;
        }
        .radio
        {
            font-size: 45px;
            display: block;
            vertical-align: top;
            margin-right: 3%;
            margin-bottom: 30%;
            text-align: center;
        }
        .buttons 
        {
            text-align: center;
        }
        .jumbotron {
            position: relative;
            background: #dca7ea url("dogGif.gif") center center;  
            width: 50%;
            display: block;
            margin-left: auto;
            margin-right: auto;
            height: 50%;
            background-repeat: no-repeat;
            overflow: hidden;
        }
        .jumbotron2 
        {
              min-height: 50%;  /* Fallback for browsers do NOT support vh unit */
              min-height: 40vh; /* These two lines are counted as one :-)       */
              background-color: #fb6f74;
              display: flex;
              align-items: center;
        }
        #dbResult
        {
            text-align: center;

        }
    </style>

    <body style = "background-color: #dca7ea;">
        <h1>Pet Name generator! The perfect name for your pet.</h1>
        <div class="jumbotron">
            <div class="container">
           </div> 
        </div>

        <div class="jumbotron2">
            <div class="container">
                  <div class="radio">
                      <label><input type="radio" name="girl">Girl</label>
                      <label><input type="radio" name="boy">Boy</label>
                      <button type="button" class="btn btn-default">Normal names</button>
                      <button type="button" class="btn btn-default">Specialty names</button> 
                      <a href="file2.php" target="_blank"><button id="submit_btn" onclick="myAjax()" type="button" class="btn btn-default">Random name</button></a> 
                      <p method="post" action="file2.php" id="dbResult" name="databaseNames">No results </p>
                  </div>

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

最后，我希望传输数据的文件是一个错误，说明＆＃34;未定义的索引：dbNames＆＃34;在file2.php中（这是它在我的第二个文件中给出错误的行）

<?php 
    $db = mysqli_connect('localhost','root','','names_tbl');
    if($db->connect_errno > 0){
        die('Unable to connect to database [' . $db->connect_error . ']');
    }

    $query = "SELECT * FROM names_tbl.general_names LIMIT 5;";
    $result = mysqli_query($db, $query);
    while($row = mysqli_fetch_assoc($result))
    {
        echo "<u>".$row['Name']."</u>";            
    }
?>

没有SO帖子能够帮助我，所以对此的任何帮助将不胜感激。

Answer 1

首先，您不应该向函数嵌入ajax请求。它消除了一些叫做“事件”的灵活性。

您希望在用户点击按钮时请求数据：

<script type = "text/javascript">
    $(function() {
      $('#normalnames').click(function(){
        $.ajax( { 
          type : 'POST',
          data : { type: 'normalnames' },
          url  : 'query.php',
          success: function ( data ) {
            $('#dbResult').html(data);
          },
          error: function ( xhr ) {
            alert( "error" );
          }
        });
      });

      $('#specialnames').click(function(){
        //etc
      });
    });
</script>

<button id="normalnames" type="button" class="btn btn-default">Normal names</button>
<button id="specialnames" type="button" class="btn btn-default">Normal names</button>

在PHP方面：

<?php
  if(isset($_POST['type'])){
    if($_POST['type'] == 'normalnames'){
      // make normal names query
    } elseif($_POST['type'] == 'specialnames'){
      // make special names query
    } else {
      die('incorrect request');
    }
  } else {
    die('unknown request');
  }
?>

现在您要在dbresponse div中注册数据：

while($row = mysqli_fetch_assoc($result)){
    $data[] = "<li>".$row['Name']."</li>";            
}

echo '<ul>' . implode($data) . '</ul>';

这将是它的要点，也许最好使用json（echo json_encode($data)没有html标签）返回，因为javascript可以遍历它并将其附加到列表中。

要在其他网页上使用该数据，请使用sessions。

将数据从一个PHP页面传递到另一个PHP页面

1 个答案: