Question

我想使用Ajax插入一大块HTML / PHP。每次插入时，它都会增加一个变量，以计算已被添加的次数（票）。然后，我处理process.php中的所有数据。我怎样才能做到这一点？我不想用JS重写所有内容。

<form name="form1" method="post" action="process.php">
<table id="dynamic_field">

<?php
$ticket = 0;
$_SESSION["ticket"] = -1;

$line = 1;
echo '  <tr>';
while($line <= 7) {
  $number = 1;
  while($number <= 5) {
    echo'<td><input id="num" name="num'.$ticket.$line.$number.'" maxlength="2" size="1" value="'. ${"num".$ticket.$line.$number}.'"></td>';  
    $number++;
  }
  echo'<td><input type="checkbox" name="checked'.$ticket.$line.'"></td>';
  $line++;
echo'  </tr>';
}
echo'  </br>';

echo'<td><button type="button" name="add" id="add" class="btn btn-danger btn_remove">Add</button></td>';

echo'</table>';
?>
<input type="submit" name="submit" />
</form>



<script>

 $(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<?php session_start(); $_SESSION["ticket"]++;  $line = 1;
echo '  <tr>';
while($line <= 7) {
  $number = 1;
  while($number <= 5) {
    echo'<td><input id="num1" name="num'.$ticket.$line.$number.'" maxlength="2" size="1" value="'. ${"num".$ticket.$line.$number}.'"></td>';  
    $number++;
  }
  echo'<td><input type="checkbox" name="checked'.$ticket.$line.'"></td>';
  $line++;
echo'  </tr>';
}
echo'  </br>';

?>');  
      });  
 });

Answer 1

为帮助您解决问题，我迅速整理了一个简单的演示，在研究和分解后，它可以帮助您找到希望的解决方案。

没有jQuery是因为我不使用它-而是有一些基本的javascript函数和一些非常简单的PHP。

概述是在初始页面加载时使用默认值零创建会话变量的。有一个简单的event listener分配给了按钮，单击该按钮将触发ajax请求。 Ajax请求由PHP处理，该计数器增加计数器并发回一些html内容。

<?php
    /* start a session */
    session_start();

    /* create the variable to count tickets */
    if( empty( $_SESSION['tickets'] ) )$_SESSION['tickets']=0;

    /* process ajax request - increment session variable and send some html back for the callback to mangle */
    if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST['action'] ) && $_POST['action']=='add-ticket' ){

        ob_clean();


        /* increment the counter */
        $_SESSION['tickets']++;



        /* send some new HTML back with content */
        exit( 
            sprintf(
                '<tr>
                    <td>%d</td>
                    <td>%s</td>
                </tr>',
                $_SESSION['tickets'],
                date( 'Y-m-d H:i:s' )
            )
        );
    }
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>PHP Sessions and Tickets</title>
        <script>
            const ajax=function(url,params,callback){
                let xhr=new XMLHttpRequest();
                xhr.onload=function(){
                    if( this.status==200 && this.readyState==4 )callback.call( this, this.response )
                };
                xhr.onerror=function(e){
                    alert(e)
                };
                xhr.open( 'POST', url, true );
                xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                xhr.setRequestHeader('X-Requested-With','XMLHttpRequest');
                xhr.send( buildparams( params ) );
            };
            const buildparams=function(p){
                if( p && typeof( p )==='object' ){
                    p=Object.keys( p ).map(function( k ){
                        return typeof( p[ k ] )=='object' ? buildparams( p[ k ] ) : [ encodeURIComponent( k ), encodeURIComponent( p[ k ] ) ].join('=')
                    }).join('&');
                }
                return p;
            };




            document.addEventListener('DOMContentLoaded',function(){
                let bttn=document.querySelector('input[type="button"][name="add"]');
                let tbl=document.querySelector('form > table');
                let span=document.querySelector('div > span');

                bttn.addEventListener( 'click', function(e){
                    ajax.call( this, location.href,{ action:'add-ticket' }, function(r){
                        tbl.querySelector('tbody').insertAdjacentHTML( 'beforeend', r );
                        span.innerText++;
                    })
                },false );
            },false );

        </script>
        <style>
            table{width:80%;border:1px solid black;float:none;margin:auto;}
            th,td{padding:1rem;text-align:center;background:white;}
            input{width:100%;padding:1rem;margin:1rem auto}
        </style>
    </head>
    <body>
        <form>
            <table>
                <tr>
                    <th>Ticket Count</th>
                    <th>Datetime</th>
                </tr>
            </table>
            <input type='button' name='add' value='Add Ticket' />
        </form>
        <?php   
            printf( '<div>The current ticket count is: <span>%d</span></div>', empty( $_SESSION['tickets'] ) ? 0 : $_SESSION['tickets'] );
        ?>
    </body>
</html>

在AJAX中使用会话变量

1 个答案: