javascript - 将数据从主页传递到模式内的 php 查询

Question

我有一个将它的行传递给模式的数据表。是否可以使用相同的模式脚本将其直接传递到 php 页面？

这是我的main_page.php

<table id="example1" class="table table-bordered">
                <thead>
                  <th>Reference No</th>
                  <th>Finger Scan No</th>
                  <th>Date From</th>
                  <th>Date To </th>
                    <th>Tools </th>
                </thead>
                <tbody>
<?php
$user = $user['fingerscanno'];
$sql = "
SELECT 
payroll.payrollno AS payrollno,
payroll.referenceno AS referenceno,
payroll.fingerscanno AS fingerscanno,
payroll.datefrom AS datefrom,
payroll.dateto AS dateto,
USERINFO.USERID,
USERINFO.BADGENUMBER

FROM 

payroll,
USERINFO

WHERE
USERINFO.BADGENUMBER = payroll.fingerscanno AND
payroll.fingerscanno='$user'
";
                    $query = sqlsrv_query($conn, $sql, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));
                    while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)){
                      echo "
                        <tr>
                        <td>".$row['referenceno']."</td>
                          <td>".$row['fingerscanno']."</td>
                          <td>".$row['datefrom']."</td>
                          <td>".$row['dateto']."</td>
                          <td>
                            <button class='btn btn-success btn-sm edit btn-flat' data-id='".$row['referenceno']."'><i class='fa fa-edit'></i> Proof of Attendance</button>
                            <button class='btn btn-danger btn-sm delete btn-flat' data-id='".$row['referenceno']."'><i class='fa fa-edit'></i> Payslip Summary</button>
                          </td>

                        </tr>
                      ";
                    }
                  ?>
                </tbody>
              </table>

<?php include 'includes/mymodal.php'; ?>

这是模态函数

$(function(){
  $("body").on('click', '.edit', function (e){
    e.preventDefault();
    $('#edit').modal('show');
    var id = $(this).data('id');
    getRow(id);
  });

这是模态页面

mymodal.php

<div class="modal fade" id="edit">
<input type="hidden" class="decid" id="id" name="id">
<table id="example2" class="table table-bordered">
<thead>
<th>Schedule Date</th>
<th>Schedule Name</th>
<th>Recorded In</th>
<th>Recorded Out</th>
<th>Day Count</th>
<th>Day Value</th>
<th>N.D. Value</th>
<th>Leave Count</th>
<th>R.H. Count</th>
<th>R.H. Value</th>
</thead>
<tbody>
<?php 
$sql = "SELECT fingerscanno, scheduledate, schedulename, recordin, recordout, noofdays, rate, nightdifferential, leaveday, regularholiday, specialholiday, referenceno
FROM payrollrecords WHERE fingerscanno='$user' and referenceno='$id'";

                    $query = sqlsrv_query($conn, $sql, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));
                    while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)){

 echo "
                        <tr>
                          <td>".$row['scheduledate']."</td>
                          <td>".$row['schedulename']."</td>
                          <td>".$row['recordin']."</td>
                          <td>".$row['recordout']."</td>
                          <td>".$row['noofdays']."</td>
                          <td>".$row['rate']."</td>
                          <td>".$row['nightdifferential']."</td>
                          <td>".$row['leaveday']."</td>
                          <td>".$row['regularholiday']."</td>
                          <td>".$row['specialholiday']."</td>
                        </tr>
                      ";
}

                  ?>
                  </tbody>
              </table>
</div>

我的问题是，我将如何将其传递到表格中？这样变量referenceno='$id'将从主页接收值。

score 1 · Accepted Answer

您需要使用 AJAX。

Ajax 是一种 javascript 方法，它允许您与后端 PHP 文件交换信息，就像您尝试做的那样。

AJAX 代码块会将数据发送到mymodal.php文件，该mymodal.php文件将执行 MySQL 查找并创建 HTML，然后返回echo一个字符串变量（可以是 json 对象，也可以是您在 while 循环中构建的 HTML）主页。AJAX 代码块将接收从函数内部的 PHP 文件回显的数据.done()，并且在该函数中，您可以修改 DOM 以注入新数据。对用户来说，看起来他们点击了一个带有类的元素edit并且数据刚刚出现在模式中。

请注意，您不要include在页面中添加mymodal.php文件main_file.php，因为 AJAX 代码块知道如何与该文件进行通信。

您需要将模式的 HTML 结构添加到主页的底部（请注意，它最初设置为display:none）：

<style>
    #lamodal{display:none;position:fixed;width:100vw;height:100vh;background:black;opacity:0.8;}
        #mdl_inner{width:60%;height:40%;}
    .myflex{display:flex;align-items:center;justify-content:center;}
</style>
<div id="lamodal" class="myflex">
    <div id="mdl_inner"></div>
</div><!-- #lamodal -->

您的 javascript (AJAX) 将如下所示：

$(function(){
    $("body").on('click', '.edit', function (e){
        e.preventDefault();
        var id = $(this).data('id');
        $.ajax({
            type: 'post',
             url: 'mymodal.php',
            data: 'userid=id'
        }).done(function(d){
            //console.log('d: '+d);
            $('#mdl_inner').html(d);
            $('#lamodal').show();
        });
    });
});

您的mymodal.php文件将更改为如下所示：

<?php 
    $sql = "SELECT fingerscanno, scheduledate, schedulename, recordin, recordout, noofdays, rate, nightdifferential, leaveday, regularholiday, specialholiday, referenceno
    FROM payrollrecords WHERE fingerscanno='$user' and referenceno='$id'";
    $query = sqlsrv_query($conn, $sql, array(), array("Scrollable" => SQLSRV_CURSOR_KEYSET));

    $out = '
        <table id="example2" class="table table-bordered">
            <thead>
                <th>Schedule Date</th>
                <th>Schedule Name</th>
                <th>Recorded In</th>
                <th>Recorded Out</th>
                <th>Day Count</th>
                <th>Day Value</th>
                <th>N.D. Value</th>
                <th>Leave Count</th>
                <th>R.H. Count</th>
                <th>R.H. Value</th>
            </thead>
            <tbody>
    ';

    while($row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC)){
        $out .= '
            <tr>
              <td>".$row['scheduledate']."</td>
              <td>".$row['schedulename']."</td>
              <td>".$row['recordin']."</td>
              <td>".$row['recordout']."</td>
              <td>".$row['noofdays']."</td>
              <td>".$row['rate']."</td>
              <td>".$row['nightdifferential']."</td>
              <td>".$row['leaveday']."</td>
              <td>".$row['regularholiday']."</td>
              <td>".$row['specialholiday']."</td>
            </tr>
        ';
    }

    $out .= '
            </tbody>
        </table>
    ';

    echo $out;
?>

请注意我们如何构造一个字符串变量并通过连接来构建它。完成后，刚刚echo $out构建的 HTML 将出现在.done()您的 AJAX 代码块的函数中。

请参阅这些额外的 AJAX 示例和说明：

http://www.jayblanchard.net/basics_of_jquery_ajax.html

简单的喜欢/不喜欢文本按钮 - 添加 ajax 等

将 var 传递给引导模式，其中 php 将使用此值

javascript - 将数据从主页传递到模式内的 php 查询

1 回答 1

Related

Reference