我正在为广播电台创建调用屏幕。我想要左侧 div 中的表单和右侧 div 中的结果。有 6 条电话线，因此应该能够同时显示所有 6 条线路。我想说明每个来电者在他们的信息之上保持在线多长时间。我创建了 2 个 php 文件。一个标记为 cm.php 的表单和另一个 cm2.php 将表单结果放在页面右侧的 div 中。我是 php 和 ajax 的新手，所以我不知道如何使用删除按钮在右侧的 div 中获取结果，因此当调用者挂断时，他们的信息就会消失。我已经在这里和整个网络上搜索了数周，并且在使用 2 个 php 文件时无法将提交的表单结果显示在页面的右侧。 ajaxSetup 确实将 cm2.php 放在右侧的 div 上，但不包含表单结果，因此 cm2.php 需要正确的代码。当它应该只刷新正确的 div 时，它也会刷新整个 html:#submitted 信息在提交表单时。我需要什么代码？我的代码如下:
cm.php:
<!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>`
cm2.php
<?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>
最佳答案
我有一些空闲时间，所以整理了一个演示，说明如何使用 session 在一个页面上完成所有这些操作。没有 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>
关于javascript - php 表单和同一页面上的多个结果自动刷新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47818675/