Обновление в реальном времени без обновления страницы

Я хотел бы узнать, как сделать автоматическое обновление моего веб-сайта/таблицы в реальном времени без необходимости обновлять страницу. Страница работает отлично.Обновление в реальном времени без обновления страницы

Например, если пользователь отправляет данные, эта страница автоматически обновит данные новых пользователей. Я занимаюсь исследованиями, и он включает ajax. Я пробовал некоторые попытки, но это испортило страницу. Любая помощь будет любезно оценена.

<html> 
<head> 
<title>Seminar Overview</title> 
</head> 
    <h1><center>Seminar Overview</center> 
    <body background="cloud.png"> 

<h4><p><a href="add.php">Create Seminar</a></p><h4> 
    <h4><p><a href="index.php">Admin Login</a></p><h4> 
    <center> 
    <?php 
    //DISABLE ERRORS 
     error_reporting(E_ERROR); 
     //ESTABLISH DATABASE SERVER CONNECTION 
     $con = mysql_connect ("194.81.104.22", "", ""); 
    if (!$con) { 
    die("Can not connect: " . mysql_error()); 
} 
//MYSQL QUERY & DATABASE SCHEMA 
mysql_select_db("db12408543", $con); 
$sql = "SELECT * FROM Register"; 
$seminaroverview = mysql_query($sql,$con); 
    $data = mysql_query($sql,$con); 
//TABLE 
echo "<table border=4 table width=1000> 
<tr> 
<th>Student ID</th> 
<th>Name</th> 
    <th>Surname</th> 
    <th>Telephone</th> 
     <th>Address</th> 
     <th>Date of Registration</th> 
     <th>Email</th> 
      <th>Registered Seminar(s)</th> 
       </tr>"; 


    //MYSQL DATA TO BE DISPLAYED THROUGH PHP TABLE 
     while($record = mysql_fetch_array($data)) { 
     echo "<tr>"; 
     echo "<td>" . $record['idRegister'] . "</td>"; 
      echo "<td>" . $record['Name'] . "</td>"; 
     echo "<td>" . $record['Surname'] . "</td>"; 
      echo "<td>" . $record['Telephone'] . "</td>"; 
     echo "<td>" . $record['Address'] . "</td>"; 
      echo "<td>" . $record['Dateofregistration'] . "</td>"; 
      echo "<td>" . $record['email'] . "</td>"; 
        echo "<td>" . $record['SeminarAttended'] . "</td>"; 
        echo "</tr>"; 
         } 
      echo "</table>"; 

        mysql_close($con); 

          ?> 
          </center> 
          </body> 
         </html>

реального времени попытка

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
    <script> 
      $(document).ready(function() { 
       setInterval(function() { // set Interval function to carry out same operation in the time specified 
        $('#main').load('seminar-overview.php #main > *'); // Reloads 'seminar-overview.php' table every 6 seconds as <div> tag is specified and closed after table 
      }, 6000); 
       }); 
    </script>

источник

2015-04-01 Glenn Yemoh

В этом примере нет javascript или ajax. Если вы ожидаете, что люди будут помогать, вам нужно будет предоставить несколько примеров, которые вы пробовали. – nomistic

AngularJS позволит вам использовать одностраничные приложения SPA и не требует обновления страницы для изменений. Это достигается посредством «двухсторонней привязки данных» через иерархию DOM через $ digest. – user1789573

Вы можете сделать [длинный опрос в Ajax] (http://techoctave.com/c7/posts/60-simple-long-polling-example-with-javascript-and-jquery) или использовать что-то вроде 'Node.JS 'делать обновления в реальном времени – D4V1D

ОК, так что после заполнения вашей таблицы в первый раз, вам необходимо будет отправить данные формы в другую PHP страницы с помощью Ajax запроса. Пример js-кода ниже (с использованием jQuery) будет выполнять новую страницу PHP с переменными POST из формы с именем #updatePage. Затем он установит содержимое таблицы на выходные страницы. Вот оно:

$('#updatePage').submit(function(event) { 
    event.preventDefault(); 
    var form = $(this); 

    $.ajax({ 
     url: "/path/to/script.php", 
     data: form.serialize(), 
     type: 'post', 
     dataType: 'html', 
     success: function(data) { 
      $('table').html(data); 
     }, 
     error: function(xhr, status) { 
      alert("Sorry, there was a problem!"); 
     }, 
    }); 
});

script.php может выглядеть примерно так:

<?php 
$newData = //MySQL functions to get data using POST vars 

echo " 
    <tr> 
     <td>" . $newData . "</td> 
    </tr> 
"; 
?>

Это основная идея, и вы должны быть в состоянии изменить свой код, чтобы сделать эту работу.

источник

2015-04-01 18:22:38

За исключением использования 'ajax' для отправки запроса другому скрипту, нельзя ли использовать функцию JQuery' $ .post (url [, data] [, success] [, dataType]) '? – Ikari

Да, если вы посмотрите на [jQuery docs] (https://api.jquery.com/jquery.post/), он говорит, что '$ .post' является« сокращенной функцией Ajax »и просто устанавливает вызов ajax для тебя. –

Да! Я использую его, поскольку он упрощает все. Но я также считаю, что AJAX предоставляет много функциональности! – Ikari

Обновление в реальном времени без обновления страницы

ответ

Смежные вопросы