Question

现在，thirdChineseSentence.php只会在刷新页面时进行随机播放。我想举个例子：＆＃39;我弹钢琴＆＃39;将出现在thirdChineseSentence.html上，并且只有在我点击加扰按钮时才会进行随机播放。请帮助：）

thirdChineseSentence.php

     <?php
     // Connect to database server
      mysql_connect("localhost", "root", "password") or die (mysql_error ());

     // Select database
      mysql_select_db("login") or die(mysql_error());

      // Get data from the database depending on the value of the id in the URL
      $strSQL = "SELECT * FROM sentences WHERE id 
      ORDER BY RAND() LIMIT 1;";

      //create an array with numbers 1-4
      $order = array(1,2,3,4);

      //shuffle them in random order
      shuffle($order);

      $rs = mysql_query($strSQL);

      // Loop the recordset $rs
      while($row = mysql_fetch_array($rs)) {
     // Write the data of the person
     //Display all the array values from 0-3 (array index starts from 0)
     echo "<dt>Sentence:</dt><dd>" . $row[$order[0]] . " " . $row[$order[1]] . " " .                                                

     $row[$order[2]] . " " . $row[$order[3]] ."</dd>";
    }
    // Close the database connection
    mysql_close();
    ?>

thirdChineseSentence.html

    <!DOCTYPE html>
    <html>
    <head>
<meta charset="UTF-8" />
<title>Sentence Scramble and Sequencer</title>
<link rel="stylesheet" type="text/css" href="Second.css" />
    <script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript">          
    </script>
     <script src="chinesesentence.js" type="text/javascript"></script>

    </head>


    <body>
<center>
    <img src = "http://imageshack.com/a/img842/1461/otd4.jpg"/>
     <h1>helloword</h1>
    <button id="showcontent">Scramble</button>
    <div id="content"></div>
    </center>

   </body>
    </html>

chinesesentence.js

   $(document).ready(function() {

   $(document).on('click', '#showcontent', function(event) {
    event.preventDefault();

    $.get("thirdChineseSentence.php", function(data) {
     $("div#content").html(data);
    });
    });

   });

Answer 1

用以下内容替换你的js：

    $(document).ready(function() {

       $('#showcontent').click( function(e) {
        e.preventDefault();

        url = 'thirdChineseSentence.php';
            $.ajax({
                type: 'POST',
                url: url, 
                dataType: 'html',

                beforeSend: function() {
                        $( "#content" ).html( "Requesting.." );
                },
                success: function(html) {
                        document.getElementById("content").innerHTML=html;
                }
            });

       });

   }

这将使用AJAX并在每次单击按钮时调用PHP文件，然后将使用PHP文件中返回的内容替换div中的内容。

Answer 2

这样吗？但是每次刷新页面后句子都会洗牌。当我点击加扰按钮时没有任何效果。 @Stuart Wickenden @ David Corbin

thirdChineseSentence.php

  <!DOCTYPE html>
  <html>
  <head>
<meta charset="UTF-8" />
<title>Sentence Scramble and Sequencer</title>
<link rel="stylesheet" type="text/css" href="Second.css" />
   <script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript">       
   </script>
   <script src="chinesesentence.js" type="text/javascript"></script>

  </head>

  <body>
<center>
<img src = "http://imageshack.com/a/img842/1461/otd4.jpg"/>
    <h1>Hello world</h1>


  <?php
  // Connect to database server
  mysql_connect("localhost", "root", "password") or die (mysql_error ());

  // Select database
  mysql_select_db("login") or die(mysql_error());

  // Get data from the database depending on the value of the id in the URL
  $strSQL = "SELECT * FROM sentences WHERE id 
  ORDER BY RAND() LIMIT 1;";

  //create an array with numbers 1-4
  $order = array(1,2,3,4);

  //shuffle them in random order
  shuffle($order);

  $rs = mysql_query($strSQL);

  // Loop the recordset $rs
  while($row = mysql_fetch_array($rs)) {
  // Write the data of the person
  //Display all the array values from 0-3 (array index starts from 0)
  echo "<dt>Sentence:</dt><dd>" . $row[$order[0]] . " " . $row[$order[1]] . " " .  
 $row[$order[2]] . " " . $row[$order[3]] ."</dd>";
  }
  // Close the database connection
  mysql_close();
  ?>

  <button id="showcontent">Scramble</button>
  <div id="content"></div>
 </center>

 </body>
 </html>

chinesesentence.js

    $(document).ready(function() {

     $('#showcontent').click( function(e) {
    e.preventDefault();

    url = 'thirdChineseSentence.php';
        $.ajax({
            type: 'POST',
            url: url, 
            dataType: 'html',

            beforeSend: function() {
                    $( "#content" ).html( "Requesting.." );
            },
            success: function(html) {
                    document.getElementById("content").innerHTML=html;
            }
        });

        });

      }

PHP连接在html页面上，点击按钮进行随机播放

2 个答案: