Question

首先介绍应用程序的工作原理:(注意：页面上有多个用户，例如患者M，患者E，等等）

1）患者X旁边的名称是一个标有签入的按钮。这是在服务器端记录的。

2）点击签入按钮后，系统会向用户显示一个用户可以选择的多个位置的下拉列表（替换初始按钮）。从select中选择一个位置后，服务器端将再次更新。

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

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

5）最后，下拉消失并出现“Checked Out”字样。

不幸的是，现在的问题是，如果我是计算机1，并且经历了单击“检入”，选择位置和检出的过程，这与计算机2完全不同。

见图：

what I want to happen

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

感谢您的帮助！我很高兴澄清你的任何问题！

下面是代码：

<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）PRELOAD！即使你打算使用类选择器，也不要

    $('.locationSelect')

一遍又一遍。如果要多次引用相同的DOM元素，请执行以下操作：

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

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

3）（可选）我建议使用像AngularJS这样的MVC平台（由Google编写）。 MVC或模型视图控制器允许您更新“模型”（基本上是JavaScript对象），“视图”（HTML）使用称为UI-Bindings的东西自动调整其值。从一开始就开始开发应用程序是一个很好的方法，但是如果你已经熟悉普通的代码，那么对你来说可能并不实用。我仍然会看看他们的教程，看看它能为您提供什么：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);

Answer 2

请查看Socket.IO，因为该网站说：

什么是Socket.IO？

Socket.IO旨在使每个浏览器和移动设备都能实现实时应用

虽然Socket.IO在NodeJS / Javascript中，但是关于using PHP with Socket.IO

的讨论很多

Answer 3

Web应用程序的基本原则之一是每个操作都是在客户端启动的，即如果要更改其中一台计算机的显示，有人必须单击上的内容那台电脑。如果服务器上发生了某些事情，最初没有可能更新第二台计算机上的显示器，并且仍然没有简单的解决方案。

然而，现代浏览器several technologies已经开发出来并且广泛用于Web邮件客户端和响应性的Web 2.0＆＃34;应用。你必须决定其中一个并自己实施，每个都有其优点和缺点。

最容易实现的（除了简单的＆＃34;刷新＆＃34;按钮）可能每隔几秒就做一次AJAX请求，并根据服务器报告的当前用户状态更新屏幕。

Answer 4

基本上，您希望在不需要重新加载页面的情况下，从另一台计算机上的一台计算机更新数据。

您已经对AJAX有一定的了解，这很好，因为这可能是您实施解决方案的方法之一。实质上，您需要的是在某个指定的时间间隔（可能是每秒或每几秒，根据您的需要）从网页轮询服务器。你可以使用AJAX来做到这一点。

当您轮询此服务器时，您可以下拉数据（HTML片段，JSON数据，在您的应用程序中有意义的任何内容）并使用此数据更新页面。因此，当用户在计算机1上进行更新时，计算机2将能够轮询服务器并提取与计算机1上的数据更改相关的更新。

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

4 个答案:

什么是Socket.IO？