Javascript php表单&；在同一页面上显示多个结果并自动刷新
我正在为一个电台创建一个呼叫屏幕。我希望表单在左边的div中，结果在右边的div中。共有6条电话线，因此所有6条电话线应能同时显示。我想在他们的信息上说明每个来电者在电话线上等待的时间。我已经创建了2个php文件。一个标记为cm.php，其中包含表单；另一个标记为cm2.php，将表单结果放在页面右侧的div中。我不熟悉php和ajax，所以我不知道如何使用delete按钮在右边的div中获得结果，所以当调用方挂断电话时，他们的信息就会消失。我在这里搜索了好几个星期&在网上搜索了好几个星期&当使用2个php文件时，无法在页面右侧显示提交的表单结果。ajaxSetup确实将cm2.php放在右侧的一个div上，但没有包含表单结果，因此cm2.php需要正确的代码。它还刷新了整个html，假设在提交表单时只刷新右侧div:#submitted info。我需要什么代码？我的代码如下： cm.php:Javascript php表单&；在同一页面上显示多个结果并自动刷新,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我正在为一个电台创建一个呼叫屏幕。我希望表单在左边的div中，结果在右边的div中。共有6条电话线，因此所有6条电话线应能同时显示。我想在他们的信息上说明每个来电者在电话线上等待的时间。我已经创建了2个php文件。一个标记为cm.php，其中包含表单；另一个标记为cm2.php，将表单结果放在页面右侧的div中。我不熟悉php和ajax，所以我不知道如何使用delete按钮在右边的div中获得结果，所以当调用方挂断电话时，他们的信息就会消失。我在这里搜索了好几个星期&在网上搜索了好几个星期&当使
<!DOCTYPE html>
<html>
<head>
<Meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-
1252">
<title>Call Mananger</title>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-
validate/1.16.0/jquery.validate.min.js"></script>
<script type="text/javascript">
$.ajaxSetup(
cache: false
});
var auto_refresh = setInterval(
function ()
{
$('#submittedInfo').load('cm2.php').fadeIn("slow");
}, 1000); // refresh every 10000 milliseconds
</script>
<style> <?php include 'call manager.css'; ?> </style>
</head>
<body>
<div id="callerInfo">
<form name="info" action="cm.php" enctype="multipart/form-data"
method="post">
<table>
<tbody>
<tr>
<td>Line</td>
<td>
<select name="select" id="line">
<option value="Line 1: ">1</option>
<option value="Line 2: ">2</option>
<option value="Line 3: ">3</option>
<option value="Line 4: ">4</option>
<option value="Line 5: ">5</option>
<option value="Line 6: ">6</option>
</select>
</td>
</tr>
<tr>
<td>Name</td>
<td>
<input type="text" name="name" value>
</td>
</tr>
<tr>
<td>Town</td>
<td>
<input type="text" name="town" value>
</td>
</tr>
<tr>
<td>Topic</td>
<td>
<input type="text" name="topic" value>
</td>
</tr>
<tr>
<td>
<input type='submit' value='Submit Caller' name="submit">
</td>
</tr>
</tbody>
</table>
</form>
</div>
<div id="submittedInfo">
No Callers
</div>
</body>
</html>`
打电话给马南格
$.ajaxSetup(
缓存：false
});
var auto_refresh=setInterval(
函数（）
{
$（'#submittedInfo'）.load（'cm2.php'）.fadeIn（“slow”）；
}, 1000); // 每10000毫秒刷新一次
线
1.
2.
3.
4.
5.
6.
名称
城镇
话题
没有来电者
`
<?php
echo "Waiting: ". date('i:s'). '</b><br>';
echo 'Line: '.$.post['select'];
echo '- '. $.post['name']. '</b><br>';
echo 'Town: '. $_POST['town']. '</b><br>';
echo 'Topic: '. $_POST['topic'].'</b><br>';
?>
<form enctype="multipart/form-data" method="post" action="cm.php">
<input type="hidden" name="listenerInfo" value="">
<input type="submit" name="deleteCaller" value="Delete Caller">
</form>
我有一点空闲时间，所以制作一个演示，演示如何使用会话在一个页面上完成这一切。没有jQuery（我不使用它），因此您可能需要适当地调整ajax调用——毫无疑问，jQuery中提供了各种方法，可以简化以下代码
<?php
session_start();
$maxlines=6; #how many phone lines - default 6
$svar='calls'; #session variable name
/* create a new session variable if it does not already exist */
if( !isset( $_SESSION[ $svar ] ) )$_SESSION[ $svar ]=array();
/* Process ajax POST requests */
if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST ) ){
ob_clean();
$cmd=filter_input( INPUT_POST, 'cmd', FILTER_SANITIZE_STRING );
$line=filter_input( INPUT_POST, 'line', FILTER_SANITIZE_NUMBER_INT );
if( $cmd ){
switch( $cmd ){
case 'poll':
$json=json_encode( $_SESSION[ $svar ] );
break;
case 'add-caller':
$_POST['time']=date('H:i:s');
$_SESSION[ $svar ][ $line ]=$_POST ;
$json=json_encode( $_SESSION[ $svar ] );
break;
case 'delete':
if( $line && array_key_exists( $line,$_SESSION[ $svar ] ) ) unset( $_SESSION[ $svar ][ $line ] );
$json=json_encode( $_SESSION[ $svar ] );
break;
}
}
header('Content-Type: application/json');
exit( $json );
}
?>
<!doctype html>
<html>
<head>
<meta charset='utf-8' />
<title>Call Manager</title>
<style>
html, html *{font-family:calibri,verdana,arial;font-size:1rem;box-sizing:border-box;}
#container{width:95%;float:none;margin:0 auto;box-sizing:border-box;}
#lhs{width:calc(20% - 2rem );float:left;height:80vh;}
#rhs{width:calc(80% - 2rem );float:right;height:80vh;}
#lhs,#rhs{display:block;clear:none;box-sizing:border-box;margin:0 1rem}
input[type='button']{float:none;display:inline-block;margin:1rem auto;}
input[type='text'],select{width:100%;padding:0.5rem;}
table{width:100%;}
td{text-align:center;}
tr td:not([colspan]):first-of-type{text-align:left;}
h1{font-size:2rem;text-align:center;}
h2{font-size:1.25rem;text-align:center;}
pre{clear:both;}
ul,li{ display:block; width:100%;float:left;}
li:nth-of-type(even){background:whitesmoke;}
option[disabled]{background:rgba(255,0,0,0.25)}
li{padding:0.25rem 1rem;}
li div span{font-weight:bold;margin:0 0 0 2rem;}
li div input{ color:red;float:right!important;clear:none; }
</style>
<script>
var _int;
var _poll=2.5;
function ajax(m,u,p,c,o){
/*
Utility function for basic Ajax requests
m = method ~ GET or POST only
u = url ~ the script or resource to which the request will be sent
p = parameters ~ an object literal of parameters to send
c = callback ~ asynchronous callback function that processes the response
o = options ~ object literal o foptions which are also passed to callback
*/
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if( xhr.readyState==4 && xhr.status==200 )c.call( this, xhr.response, o, xhr.getAllResponseHeaders() );
};
if( o.hasOwnProperty('formdata') && o.formdata===true && m.toLowerCase()=='post' ){
/* send formdata object "as-is" ~ set p = FormData */
} else {
var params=[];
for( var n in p )params.push( n+'='+p[ n ] );
switch( m.toLowerCase() ){
case 'post': p=params.join('&'); break;
case 'get': u+='?'+params.join('&'); p=null; break;
}
}
xhr.open( m.toUpperCase(), u, true );
if( !o.hasOwnProperty('formdata') ) xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
if( o && Object.keys( o ).length > 0 && o.hasOwnProperty('headers') ){
for( var h in o.headers )xhr.setRequestHeader( h, o.headers[ h ] );
}
xhr.send( p );
}
function createNode( t, a, p ) {
try{
/*
utility function to simplify creation of new DOM nodes
t = type ~ node type or tag name of node
a = attributes ~ object literal of attributes to add to node
p = parent ~ the DOM node to which the new node will be added
*/
var el = ( typeof( t )=='undefined' || t==null ) ? document.createElement( 'div' ) : document.createElement( t );
for( var x in a ) if( a.hasOwnProperty( x ) && x!=='innerHTML' ) el.setAttribute( x, a[ x ] );
if( a.hasOwnProperty('innerHTML') ) el.innerHTML=a.innerHTML;
if( p!=null ) typeof( p )=='object' ? p.appendChild( el ) : document.getElementById( p ).appendChild( el );
return el;
}catch(err){
console.warn('createNode: %s, %o, %o',t,a,p);
}
}
function bindEvents( event ){
/* get references to dom nodes */
var form=document.getElementById('caller-info');
var select=form.querySelector('select');
var rhs=document.getElementById('rhs').querySelector('ul');
/* utility functions */
var _clearform=function(){
Array.prototype.slice.call( form.querySelectorAll('input[type="text"]') ).forEach(function(n){n.value=''});
};
var _disable=function(i){
select.querySelector('option[data-id="'+i+'"]').disabled=true;
};
var _enable=function(i){
select.querySelector('option[data-id="'+i+'"]').removeAttribute('disabled');
};
var _deletecaller=function(e){
_enable.call( this, this.dataset.id );
_setcaller.call( this, this.dataset.id, 'Line '+this.dataset.id )
this.parentNode.parentNode.parentNode.removeChild( this.parentNode.parentNode );
};
var _setcaller=function(i,name){
select.querySelector('option[data-id="'+i+'"]').innerHTML=name;
}
/* ajax config */
var method='post';
var url=location.href;
var options={ formdata:true, node:rhs, clear:true };
var callback=function(r,o,h){
/* clear text fields in the form */
if( o.clear===true ) _clearform.call( this );
var data=JSON.parse( r );
for( var n in data ){
var json=data[n];
var id='caller_'+json.line;
/*
change attributes of select menu
and change the displayed text of
selected option to indicate the line
is busy
*/
_enable.call( this, json.line );
_disable.call( this, json.line );
_setcaller.call( this, json.line, 'Line '+json.line+' - '+json.name );
/*
if there is NOT a node with id ( as above )
then create a new `li` node with child content
including the `delete` button to which a new
`onclick` event listener is added.
*/
if( !document.getElementById( id ) ){
var li=createNode( 'li', { id:id }, o.node );
var div=createNode( null,{ 'data-id':json.line, innerHTML:'<span>Line:</span> '+json.line+' <span>Name:</span> '+json.name+' <span>Town:</span> '+json.town+' <span>Topic:</span> '+json.topic+' <span>Waiting since: </span>' + json.time },li);
var bttn=createNode( 'input', { type:'button',value:'Delete','data-id':json.line }, div );
bttn.onclick=function( event ){
ajax.call( this, method, url, { cmd:'delete', line:this.dataset.id }, _deletecaller.bind( this ), { node:rhs } );
}.bind( bttn );
}
}
/*
If there are no child nodes (`li`) to the
`ul` - stop polling
*/
if( o.node.childNodes.length==0 ){
clearInterval( _int );
_int=Number.NaN;
console.info('stop polling...');
}
};
var _beginpolling=function(){
if( isNaN( _int ) ){
console.info('start polling...');
_int=setInterval(function(){
ajax.call( this, method, url, { cmd:'poll' }, callback, { node:rhs, clear:false } );
}, 1000 * _poll );
}
};
/* Add caller - event listener assigned to `Submit Caller` button */
var evtSubmitCaller=function( event ){
/*
rather than manually collecting form field parameters
and processing into a payload to send in the request,
use the `FormData` object ~ adding ( append ) a custom
parameter `cmd`
*/
var fd=new FormData( form );
fd.append('cmd','add-caller');
ajax.call( this, method, url, fd, callback, options );
_beginpolling.call( this );
};
form.querySelector('input[type="button"]').onclick=evtSubmitCaller;
/* Poll every n seconds */
_beginpolling.call( this );
}
document.addEventListener( 'DOMContentLoaded', bindEvents, false );
</script>
</head>
<body>
<h1>Call Manager</h1>
<div id='container'>
<div id='lhs' data-id='callerInfo'>
<form id='caller-info' method='post'>
<h2>Add Caller</h2>
<table>
<tbody>
<tr>
<td>Line</td>
<td>
<select name='line'>
<?php
for( $i=1; $i <= $maxlines; $i++ ){
$caller = !empty( $_SESSION[ $svar ] ) && array_key_exists( $i, $_SESSION[ $svar ] ) ? 'Line '.$i.' - '.$_SESSION[ $svar ][ $i ]['name'] : "Line $i";
$disabled = !empty( $_SESSION[ $svar ] ) && array_key_exists( $i, $_SESSION[ $svar ] ) ? 'disabled=true' : '';
echo "<option data-id='$i' value='$i' $disabled>$caller";
}
?>
</select>
</td>
</tr>
<tr>
<td>Name</td>
<td>
<input type='text' name='name' />
</td>
</tr>
<tr>
<td>Town</td>
<td>
<input type='text' name='town' />
</td>
</tr>
<tr>
<td>Topic</td>
<td>
<input type='text' name='topic' />
</td>
</tr>
<tr>
<td colspan=2>
<input type='button' value='Submit Caller' />
</td>
</tr>
</tbody>
</table>
</form>
</div>
<div id='rhs' data-id='submittedInfo'>
<ul></ul><!-- will be populated by ajax callback -->
</div>
</div>
</body>
</html>
电话经理
html，html*{字体系列：calibri，verdana，arial；字体大小：1rem；框大小：边框框；}
#容器{宽度：95%；浮动：无；边距：0自动；框大小：边框框；}
#lhs{宽度：计算（20%-2rem）；浮动：左侧；高度：80vh；}
#rhs{宽度：计算（80%-2rem）；浮动：右侧；高度：80vh；}
#lhs，#rhs{显示：块；清除：无；框大小：边框框；边距：0 1rem}
输入[type='button']{float:none；显示：内联块；边距：1rem auto；}
输入[type='text']，选择{width:100%；padding:0.5rem；}
表{宽度：100%；}
td{text align:center；}
tr td:not（[colspan]）：类型{text align:left；}的第一个
h1{字体大小：2rem；文本对齐：居中；}
h2{字体大小：1.25rem；文本对齐：居中；}
pre{clear:两者；}
ul，li{显示：块；宽度：100%；浮点：左；}
li:n类型（偶数）{背景：白烟；}
选项[已禁用]{背景：rgba（255,0,0,0.25）}
li{padding:0.25rem 1rem；}
li div span{font-weight:bold；margin:02rem；}
li div输入{color:red；float:right！重要；clear:none；}
var_int；
var_poll=2.5；
函数ajax（m、u、p、c、o）{
/*
用于基本Ajax请求的实用程序函数
m=方法~仅获取或发布
u=url~请求将发送到的脚本或资源
p=parameters~要发送的参数的对象文本
c=callback~处理响应的异步回调函数
o=options~对象文字o也传递给回调函数的选项
*/
var xhr=new XMLHttpRequest（）；
xhr.onreadystatechange=函数（）{
if（xhr.readyState==4&&xhr.status==200）c.call（this，xhr.response，o，xhr.getAllResponseHeaders（））；
};
if（o.hasOwnProperty（'formdata'）&&o.formdata==true&&m.toLowerCase（）==post'）{
/*按原样发送formdata对象~set p=formdata*/
}否则{
var参数=[]；
对于（p中的变量n）参数push（n+'='+p[n]）；
开关（m.toLowerCase（））{
大小写“post”：p=params.join（“&”）；break；
大小写'get'：u+='？'+参数join（'&'）；p=null；break；
}
}
xhr.open（m.toUpperCase（），u，true）；
如果（！o.hasOwnProperty（'formdata'））xhr.setRequestHeader（'Content-Type'，'application/x-www-form-urlencoded'）；
if（o&&Object.keys（o）.length>0&&o.hasOwnProperty（'headers'））{
对于（o.headers中的var h）xhr.setRequestHeader（h，o.headers[h]）；
}
xhr.send（p）；
}
函数createNode（t，a，p）{
试一试{
/*
用于简化新DOM节点创建的实用程序函数
t=类型~节点类型或节点的标记名
a=属性~要添加到节点的属性的对象文字
p=parent~新节点将添加到的DOM节点
*/
var el=（typeof（t）='undefined'| | t==null）？document.createElement（'div'）：document.createElement（t）；
对于（a中的变量x）if（a.hasOwnProperty（x）&&x！='innerHTML'）el.setAttribute（x，a[x]）；
如果（a.hasOwnProperty（'innerHTML'））el.innerHTML=a.innerHTML；
如果（p！=null）typeof（p）='object'？p.appendChild（el）：document.getElementById（p）.appendChild（el）；
返回el；
}捕捉（错误）{
console.warn（'createNode:%s，%o，%o'，t，a，p）；
}
}
函数bindEvents（事件）{
/*获取对dom节点的引用*/
var form=document.getElementById（'caller-info'）；
变量选择=fo