Question

嗨所以我设法找出了我最大的问题，我很高兴它的工作方式与我想要的一样。现在，实现我的目标的第二个阶段是让我能够使用ajax更新页面而无需刷新。 php等在下面，有人可以给我看或指向正确的方向。谢谢。

<?php
$link = mysqli_connect('localhost','root','password','database');
if (mysqli_connect_errno()) {
    echo 'Error: Could not connect to database. Please try again later';
    exit;   
}
$db = mysqli_select_db($link, "database");

//check if the starting row variable was passed in the URL or not
if (!isset($_GET['feedback']) or !is_numeric($_GET['feedback'])) {
  //we give the value of the starting row to 0 because nothing was found in URL
  $feedback = 0;
//otherwise we take the value from the URL
} else {
  $feedback = (int)$_GET['feedback'];
}
$prev = $feedback - 4;

$query = "SELECT * FROM clients, orders WHERE clients.ID = orders.ID ORDER BY Date DESC LIMIT $feedback,4";

$result = mysqli_query($link,$query);


?>
<div class="sidebar">
           <div class="clientwrapper">
                <h2>Client Feedback</h2>
                    <div class="box">                   
                    <?php 
                     while($row=mysqli_fetch_array($result)){
                     echo '<p> '.$row["Comments"].' <span class="name"> By '.$row["Organisation"].' </span></p>'; 
                     }
                     ?>
                    <?php echo  '<a class="nodecoration" href=" '.$_SERVER['PHP_SELF'].'?feedback='.($feedback+4).'" ><span class="next-button">More</span></a>' ?>
                    <?php if ($prev >= 0) echo  '<a class="nodecoration" href=" '.$_SERVER['PHP_SELF'].'?feedback='.$prev.'" ><span class="prev-button"></span></a>' ?>

                   <div class="clear"></div>
                     </div>
            </div>



         <div class="announcewrapper">
        <h2>Announcements</h2>
        <div class="box">
        <p>There are currently no announcements.</p>
        </div>       
        </div>

    </div>

Answer 1

查看此代码，它表明您正在开发更大的应用程序。首先，阅读PHP OOP。从长远来看，学习这一点而不是使用旧的脚本方法将极大地帮助您。现在花费时间来实现这一目标的好处远超过了不能让它像你想要的那样快速运行的缺点。

话虽如此，无论你是否决定对此进行分类，我都会删除脚本顶部的逻辑并将其粘贴到另一个可从Web服务器访问的文件中。而不是回显表格格式的数据，而是转储出JSON格式的内容。

将此页面中的热门代码替换为curl，无论您将新创建的文件粘贴到服务器上，还是json_decode，以获取可用于构建表的可迭代对象。如果您正在处理回复，请执行POST（或更好DELETE）curl。

现在是棘手的（ish）部分。您希望您的脚本增强您的服务器驱动的功能，而不是突兀的。最简单的方法是使用jQuery之类的框架，绑定到单击事件并使用event.preventDefault()功能来阻止服务器回发。在您的脚本事件绑定的函数内，在那里进行$.ajax调用，在延续中显示您想要的任何数据。

希望有所帮助。如果您不熟悉任何条款，快速谷歌搜索将产生大量关于每个主题的文档。

Answer 2

尝试下面的AJAX代码，

function change_category(id)
{

        $.ajax({
            type: "POST",
            url: "ajax_update_query.php?subcat="+sub_cat,
            data:   "pid=" + id,
            success: function(html){
                $("#response_sub_cat").html(html);
            }
        });
}

你可以把这个功能放在你正在使用的任何事件上，我的意思是onClick，onChange等。在ajax_update_query.php页面中，您可以根据需要查询更新数据库。

感谢。

Answer 3

这是一个很长的镜头，因为我没有处理你的代码，我通常通过逐步调整代码（并测试它）来开发。所以这可能需要你做更多的工作才能让它正常行事......

// BUGGY INITIAL CODE REMOVED

<强> Appendum

此解决方案使用jQuery的$.load() function - 请参阅http://api.jquery.com/load。您将需要在页面的<head>部分中包含jQuery，使用以下代码：

<head>
<!-- Whatever other bits are already here //-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"
        type="text/javascript"></script>
</head>

附录＃2

以下是一个演示此功能的自包含PHP脚本。已经过测试和工作。只需删除标记为“仅测试数据”的行并从标记为“PROD DATA”的行的开头删除#，它应该是您完整解决方案的一半：

<html>
<head>
<title>Tester</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<style>
a.inactive { color:#AAA; }
</style>
</head>
<body>
<?php
# Page Configuration Details
$dbHost = 'localhost';
$dbUser = 'root' ;
$dbPass = 'password';
$dbBase = 'database';
$reviewsPerPage = 4;

#$link = mysqli_connect( $dbHost , $dbUser , $dbPass , $dbBase );         // PROD DATA ONLY
#if( mysqli_connect_errno() )                                             // PROD DATA ONLY
#  die( 'Error: Could not connect to database. Please try again later' ); // PROD DATA ONLY

#$db = mysqli_select_db( $link , $dbBase );                               // PROD DATA ONLY

//check if the starting row variable was passed in the URL or not
if( !isset( $_GET['feedback'] ) || !is_numeric( $_GET['feedback'] ) ){
  //we give the value of the starting row to 0 because nothing was found in URL
  $feedback = 0;
  $prevPage = false;
}else{
  //otherwise we take the value from the URL
  $feedback = (int) $_GET['feedback'];
  $prevPage = max( $feedback-$reviewsPerPage , 0 );
}
$nextPage = $reviewsPerPage+$feedback;

#$query = "SELECT * FROM clients, orders                                  // PROD DATA ONLY
#           WHERE clients.ID = orders.ID                                  // PROD DATA ONLY
#           ORDER BY Date DESC                                            // PROD DATA ONLY
#           LIMIT $feedback,$reviewsPerPage";                             // PROD DATA ONLY

#$result = mysqli_query( $link , $query );                                // PROD DATA ONLY

$result = array_fill(                                                     // TEST DATA ONLY
            $feedback ,                                                   // TEST DATA ONLY
            $reviewsPerPage ,                                             // TEST DATA ONLY
            array(                                                        // TEST DATA ONLY
              'Comments'=>'The comments' ,                                // TEST DATA ONLY
              'Organisation'=>'John Smith'                                // TEST DATA ONLY
            )                                                             // TEST DATA ONLY
          );                                                              // TEST DATA ONLY

?>
<div class="sidebar">
  <div class="clientwrapper">
    <h2>Client Feedback</h2>
    <div id="clientFeedback" class="box">
      <div class="feedbackHolder">
        <div id="clientFeedbackContent">
<?php 
#while( $row = mysqli_fetch_array( $result ) ){                           // PROD DATA ONLY
foreach( $result as $k => $row ){                                         // TEST DATA ONLY
  #echo '          <p>'.$row['Comments'].                                 // PROD DATA ONLY
  #     ' <span class="name">By '.$row['Organisation'].'</span></p>';     // PROD DATA ONLY
  echo '          <p>#'.$k.': '.$row['Comments'].                         // TEST DATA ONLY
        ' <span class="name">By '.$row['Organisation'].'</span></p>';     // TEST DATA ONLY
}

echo '          <a class="nodecoration" href="'.$_SERVER['PHP_SELF'].'?feedback='.$nextPage.'" ><span class="next-button">More</span></a>'."\n";
echo '          <a class="nodecoration'.( $prevPage===false ? ' inactive' : '' ).'" href="'.$_SERVER['PHP_SELF'].'?feedback='.(int) $prevPage.'" ><span class="prev-button">Prev</span></a>'."\n";
?>
        </div>
      </div>
      <div class="clear"></div>
      <script type="text/javascript">
      var reviewsPerPage = <?php echo $reviewsPerPage; ?>;
      $(document).ready(function(){
        // Bind our Custom Code to the "A" tags with class "nodecoration" within the "clientFeedback" div
        $( '#clientFeedback a.nodecoration' ).live( 'click' , function(e){
          console.log( 'Running' );
          e.preventDefault();
          // Get the URL to Load
          theURL = $( this ).attr( 'href' );
          // Use the jQuery $.load() function to replace the contents of this element
          // with another element gained through AJAX
          $( '#clientFeedback .feedbackHolder' )
            .load(
              theURL+' #clientFeedbackContent' ,
              function(){
                e.preventDefault(); // Prevent the link from behaving like it normally would.
              });
        });
      });
      </script>
    </div>
  </div>
  <div class="announcewrapper">
    <h2>Announcements</h2>
    <div class="box">
      <p>There are currently no announcements.</p>
    </div>       
  </div>
</div>
</body>
</html>

如何用ajax更新这个页面？

3 个答案: