个人中心
gpt4 book ai didi

javascript - php 表单和同一页面上的多个结果自动刷新

转载 作者：行者123 更新时间：2023-11-28 02:35:16 25 4
gpt4 key购买 nike

我正在为广播电台创建调用屏幕。我想要左侧 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/

25 4 0
文章推荐： javascript - ng-Model 未从 nicEdit 格式的 Textarea 更新
文章推荐： javascript - CSS动画，将元素移到前面
文章推荐： 单击时的Javascript切换动画
文章推荐： css - mdc-fab背景 mdc-theme-secondary
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com