2012-01-11 2 views
-1

Я довольно новичок в PHP, но смотрел этот учебник. http://www.devirtuoso.com/2009/07/beginners-guide-to-using-ajax-with-jquery/ Я хочу проверить аналогичную концепцию для отображения данных из моей базы данных на странице, когда кто-то передает данные через форму. Например, есть страница, на которой вы выбираете, какую цветную обувь вы хотите, и страницу с таблицей лидеров, чтобы узнать, сколько раз был выбран каждый цвет. У меня нет проблем с отправкой формы, но не стоит начинать искать, чтобы содержимое отображалось в таблице лидеров с помощью ajax. Может ли кто-нибудь указать мне в правильном направлении здесь, пожалуйста?Показать данные в реальном времени с помощью AJAX/JQuery/PHP

+0

Когда вы говорите в режиме реального времени, вы имеете в виду мгновенно или каждую минуту или около того? – gahooa

+0

В идеале я хотел бы, чтобы это было мгновенно (на форме submit), что касается того, что я имел в виду, может быть сказано 5-минутный разрыв между действием (form submit), затем 3 действия в минуту. – ak85

ответ

1

вы должны начать с этой

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
    <title>Ajax With Jquery</title> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
    <script type="text/javascript" charset="utf-8"> 

     $(document).ready(function(){ 
      $('#txtValue').keyup(function(){ 

       $.ajax({ 
       url: '/ajax.php', 
       type: "POST", 
       data: "value="+$(this).val, 
       cache: true, 
       dataType: "JSON", 
       success: function(response){ 
        $("#leader-board").append("you choose "+ $(this).val + "color : " +response.count + " times");   
       } 
       }); 

      }); 

     }); 

    </script> 
</head> 

<body> 

    <label for="txtValue">Enter a value : </label> 
    <input type="text" name="txtValue" value="" id="txtValue"> 

    <div id="leader-board"></div> 

</body> 
</html> 

и вы ajax.php файл выглядят так

<?php 
//if your data return result like this so you have to do this process 
$data = array("count"=>5); 
echo json_encode($data); 
?> 
0

Вы можете отправить данные о форме и получить свой ответ в своем div, у которых есть id 'yourDivId', как показано ниже. Вы должны сделать еще один столбец «countcolor» в своей таблице. Увеличивайте его, когда пользователь запрашивает определенный цвет.

 $.ajax({ 
     url: base_path + "/folder/test.php", 
     data: "id="+id, 
     type: 'GET', 
    success: function (resp) { document.getElementById('yourDivId').innerHTML=resp;}, 
     error: function(e){ alert('Error: '+e); } 
    }); 
0

После отправки формы, вы должны получить соответствующие данные, эхо его обратно (если вы используете Ajax, вы хотите, чтобы повторить это снова с помощью json_encode();), а затем поместить его в «лидерах "div. например

страница Действие для представления в базе данных

<?php 
    header('Content type: application/json'); 
    // after you've submitted the data to the database, get the data for the leaderboard 
    $leaderboard_data = array(); 
    $leaderboard_data = your_function_to_grab_data(); 
    echo json_encode($leaderboard_data); 
?> 

На странице, где вы отправите форму

$.ajax({ 
    url: 'insert/path/to/action/here', 
    success: function(data) { 
    $("div#leaderboard-div").html(data) 
    } 
}); 
Смежные вопросы