php - 每隔几秒刷新一次获取服务器代码并更新表单元素

Question

首先，应用程序的工作原理如下:(注意:页面上有多个用户，如患者 M、患者 E 等)

1) 患者 X 姓名旁边是一个标记为登记 的按钮。这是在服务器端记录的。

2) 单击 checkin 按钮后，用户会看到一个下拉列表(替换初始按钮)，其中包含用户可以选择的多个位置。从选择中选择一个位置后，服务器端将再次更新。

3) 然后用户可能决定选择多个位置，重复步骤 2

4) 最后，当用户完成位置选择后，他点击用户在第 2 步和第 3 步中点击位置的同一选择中的结帐按钮，标题为“结帐” .单击此按钮后，它会发送到 checkloc.php 并记录。

5) 最后，下拉菜单消失，出现“已 checkout ”字样。

不幸的是，现在的问题是，如果我是计算机 1，并且要完成单击“ checkin ”、选择位置和 checkout 的过程，这与计算机 2 执行的操作完全不同。

这是一个图表:

所以基本上我需要一种每隔几秒获取服务器代码并使用当前值更新表单元素的方法。我是一个非常新的程序员，所以代码和教程会更有帮助。另外，正如我刚才提到的，我是一名新程序员，所以如果我的代码能够以任何方式得到清理，那就太棒了。

感谢所有帮助!我很乐意澄清您的任何问题!

代码如下:

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>

<script type="text/javascript">
$(document).ready(function() {
$('.locationSelect').hide();  // Hide all Selects on screen
$('.finished').hide();        // Hide all checked Out divs on screen
$('.checkOut').hide();

$('.checkIn').click(function() {
    var $e = $(this);
    var data = $e.data("param").split('_')[1] ;
    // gets the id  of button
    // You can map this to the corresponding button in database...
    $.ajax({
        type: "POST",
        url: "checkin.php",
        // Data used to set the values in Database
        data: { "checkIn" : $(this).val(), "buttonId" : data},
        success: function() {
            // Hide the current Button clicked
            $e.hide();
            // Get the immediate form for the button
            // find the select inside it and show...
            $('.locationSelect').show();
            $('.checkOut').show();
        }
    });
});

$('.locationSelect').change(function() {
    $e = $(this);
    var data = $e.data("param").split('_')[1] ;
    // gets the id  of select
    // You can map this to the corresponding select in database...
    $.ajax({
        type: "POST",
        url: "changeloc.php",
        data: { "locationSelect" : $(this).val(), "selectid" : data},
        success: function() {
            // Do something here
        }
    });
});

$('.checkOut').click(function() {
    var $e = $(this);
    var data = $e.data("param").split('_')[1] ;
    // gets the id  of button
    // You can map this to the corresponding button in database...
    $.ajax({
        type: "POST",
        url: "checkout.php",
        // Data used to set the values in Database
        data: { "checkOut" : $(this).val(), "buttonId" : data},
        success: function() {
            // Hide the current Button clicked
            $e.hide();
            $('.locationSelect').hide();
            // Get the immediate form for the button
            // find the select inside it and show...
            $('.finished').show();
        }
    });
});

});
</script>

和 html:

<button class="checkIn" data-param="button_9A6D43BE-D976-11D3-B046-00C04F49F230">Check In</button>

<form method='post' class='myForm' action=''>
  <select name='locationSelect' class='locationSelect' data-param="location_9A6D43BE-D976-11D3-B046-00C04F49F230">
    <option value="0">Select a location</option>
    <option value='1'>Exam Room 1</option>
    <option value='2'>Exam Room 2</option>
    <option value='3'>Exam Room 3</option>
    <option value='4'>Exam Room 4</option>
  </select>
</form>
<button class="checkOut" data-param="cbutton_9A6D43BE-D976-11D3-B046-00C04F49F230">Check Out</button>

<div class='finished' style='color:#ff0000;'>Checked Out</div>

这是服务器端代码(我把它分成了三个页面只是为了测试)

checkin .php

<?php

date_default_timezone_set('America/Denver');

$apptid = $_REQUEST['buttonId'];
$currentlocationstart = date("Y-m-d H:i:s"); 

if(isset($_REQUEST['checkIn'])){
    $checkin = 0;
}


$hostname = 'localhost';

$username = '*******';

$password = '******';


$conn = new PDO("mysql:host=$hostname;dbname=sv", $username, $password);

$sql = "UPDATE schedule SET currentlocation = ?, currentlocationstart = ? WHERE apptid= ? ";
$q = $conn->prepare($sql);
$q->execute(array($checkin,$currentlocationstart, $apptid));


?>

locationchange.php

<?php

date_default_timezone_set('America/Denver');

$apptid = $_REQUEST['selectId'];
$currentlocationstart = date("Y-m-d H:i:s"); 

if(isset($_REQUEST['locationSelect'])){
    $currentLocation = $_REQUEST['locationSelect'];
}


$hostname = 'localhost';
$username = '*****';
$password = '*******';


$conn = new PDO("mysql:host=$hostname;dbname=sv", $username, $password);

$sql = "UPDATE schedule SET currentlocation = ?, currentlocationstart = ? WHERE apptid= ? ";
$q = $conn->prepare($sql);
$q->execute(array($currentlocation,$currentlocationstart, $apptid));

?>

和 checkout.php

<?php

date_default_timezone_set('America/Denver');

$apptid = $_REQUEST['buttonId'];
$currentlocationstart = date("Y-m-d H:i:s"); 

if(isset($_REQUEST['checkOut'])){
    $checkin = 1000;
}


$hostname = 'localhost';

$username = '*********';

$password = '********';


$conn = new PDO("mysql:host=$hostname;dbname=sv", $username, $password);

$sql = "UPDATE schedule SET currentlocation = ?, currentlocationstart = ? WHERE apptid= ? ";
$q = $conn->prepare($sql);
$q->execute(array($checkin,$currentlocationstart, $apptid));


?>

Answer 1

您指的是一种称为“心跳”的方法。我将在此处发布一个示例，但首先我想给您一些提示，因为正如您所说，您是新开发人员:)。

1) 对于 JQuery，尽量避免使用类选择器。这是出了名的慢。尽可能使用 id 选择器，如果不可能，则使用具有缩小搜索范围的节点名选择器。浏览器使用 ID 作为 dom 元素的一种“索引”或“键”，因此它是最快的搜索。

2) 预载!即使你打算使用类选择器，也不要这样做

    $('.locationSelect')

一遍又一遍。如果您要多次引用同一个 DOM 元素，请执行以下操作:

    var locationSelect = $('.locationSelect'); //this creates a reference
    $(locationSelect).whatever() //this uses the reference

通过这样做，您只需搜索一次 DOM。对于较小的应用程序来说这似乎不是什么大问题，但是随着您的应用程序变得越来越复杂，搜索 DOM 以查找元素所花费的时间也越来越多。通过使用引用，您只需搜索一次。

3) (可选)我建议使用像 AngularJS(由 Google 编写)这样的 MVC 平台。 MVC 或 Model View Controller 允许您更新“模型”(基本上是 JavaScript 对象)，“ View ”(HTML)使用称为 UI 绑定(bind)的东西自动调整其值。这是从一开始就开发应用程序的好方法，但如果您已经精通简明代码，那么这对您来说可能不切实际。我仍然会看一下他们的教程，看看它能为您提供什么:http://docs.angularjs.org/tutorial/

现在回到您原来的问题!是的，通过使用称为心跳的方法，jQuery 完全可以做到这一点。心跳允许您模拟服务器和客户端之间的数据持久性。心跳越频繁，您的客户端就越同步，但您的网络服务器上的负载也越大。这是一种平衡行为。
简而言之，它的工作原理如下:

    setInterval(function(){
        $.ajax({
           url: 'heartbeatscript.php',
           method: 'post'
           //whatever data you want to send
        }).done(function(data){
           //do whatever with the returned result
        });
    },heartbeatInterval); //heartbeatInterval will be however many MS you want    

我还建议使用 JSON 在客户端和服务器之间进行通信。 JSON 在两端都很容易解析，而在客户端，它只是解析大容量数据的最快机制。 JSON 被直接解析为 JavaScript 对象，因为该符号实际上是 JS 用来在浏览器中存储对象数据的方式。 XML 也是一个不错的选择。两者都很容易上手:

客户端:您可以使用 jQuery 来解析基本的 XML:

    $('nodeName',xml);

您可以像这样将 JSON 解析为 JSO:

    var JSO = JSON.parse(JSONString);