每隔几秒刷新一次服务器代码并更新表单元素
Muh*_*mbi 8 html javascript php ajax jquery
从这里开始,应用程序的工作原理如下:(注意:页面上有多个用户,如患者M,患者E,等等)
1)患者X旁边的名称是一个标记为" 检入"的按钮.这是在服务器端记录的.
2)单击" 检入"按钮后,将向用户显示用户可以选择的多个位置的下拉列表(替换初始按钮).从选择中选择位置后,再次更新服务器端.
3)然后用户可能决定选择多个位置,重复步骤2
4)最后,当用户完成选择位置时,他点击用户在步骤2和3中单击位置的同一选择中的" 检出"按钮,标题为"检出".单击此按钮后,会将其发送到checkloc.php并进行记录.
5)最后,下拉消失并出现Checked Out字样.
不幸的是,现在的问题是,如果我是计算机1,并且经历了单击"检入",选择位置和检出的过程,这与计算机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));
?>
您指的是一种称为"心跳"的方法.我将在这里发布一个例子,但首先我想给你一些指示,因为你说,你是一个新的开发人员:).
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);
看看Socket.IO,因为该站点说:
什么是Socket.IO？
Socket.IO旨在使每个浏览器和移动设备中的实时应用程序成为可能
虽然Socket.IO在NodeJS/Javascript中,但是有很多关于将PHP与Socket.IO一起使用的讨论
| 归档时间： |
|
| 查看次数： |
915 次 |
| 最近记录： |