Как использовать AJAX для обновления этой страницы? - PullRequest
Новая
       4

Как использовать AJAX для обновления этой страницы?

0 голосов
/ 12 мая 2011

Привет, так что мне удалось выяснить мою самую большую проблему, и я счастлив, что она в значительной степени работает так, как я хочу.Теперь второй этап для достижения моей цели - это возможность обновить страницу без обновления с помощью 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>

Ответы [ 3 ]

0 голосов
/ 12 мая 2011

Попробуйте этот код ниже для 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 вы запрашиваете обновление базы данных в соответствии с вашими требованиями.

Спасибо.

0 голосов
/ 12 мая 2011

Это довольно долгий путь, так как я не работаю над вашим кодом, и я обычно разрабатываю, настраивая код (и тестируя его), шаг за шагом.Так что это может потребовать немного больше работы с вашей стороны, чтобы заставить его вести себя правильно ... 

// BUGGY INITIAL CODE REMOVED

Приложение

В этом решении используется jQuery 's $.load() function - См. http://api.jquery.com/load. Вам нужно будет включить jQuery в раздел <head> страницы, на которой будет находиться вышеуказанный код, используя следующее: 

<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, который демонстрирует эту функциональность.Был проверен и работает.Просто удалите строки, помеченные «ТОЛЬКО ДАННЫЕ ДЛЯ ТЕСТА», и удалите # s из начала строк, помеченных как «ПРОДАННЫЕ ДАННЫЕ», и это должно быть на полпути к полному решению для вас: 

<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>
0 голосов
/ 12 мая 2011

Глядя на этот код, можно предположить, что вы разрабатываете приложение большего размера.Во-первых, прочтите PHP OOP .Изучение этого, а не использование старых методов сценариев, поможет вам в долгосрочной перспективе.Преимущества тратить время на это сейчас далеко перевешивают недостаток того, что он работает не так быстро, как вам хотелось бы.

Сказав это, независимо от того, решите вы или нетЕсли я сделаю это, я вырву логику в верхней части вашего скрипта и вставлю в другой файл, доступный с вашего веб-сервера.Вместо того, чтобы выводить данные в формате таблицы, выведите содержимое в формате JSON.

Замените верхний код на этой странице на curl, куда бы вы ни прикрепили вновь созданный файл на вашем сервере, и json_decode, чтобы получить его.итеративный объект, который вы можете использовать для построения своей таблицы.Если вы имеете дело с постбэк, то выполните POST (или лучше DELETE) curl.

Теперь начинается сложная (иш) часть.Вы хотите, чтобы ваш сценарий улучшил функциональность вашего сервера и не был навязчивым.Самый простой способ - это использовать фреймворк, такой как jQuery, привязку к событиям кликов и использовать функциональность event.preventDefault(), чтобы предотвратить обратную передачу сервера.Внутри функции, с которой связано ваше сценарийное событие, сделайте там свой $.ajax вызов, отображая все данные, которые вы хотите в продолжении.

Надеюсь, что это поможет.Если вы не знакомы ни с одним из терминов, быстрый поиск в Google даст массу документации по каждому предмету.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...