javascript - 在同一页面的 div 中加载 PHP 回显链接的内容

标签 javascript jquery html css sql

我有来自数据库表的SELECT数据。这些数据带有链接。我想要的是,当我单击链接时,它会在 div 中加载更多数据,而不是转到其他页面。每个链接都带有一个 id,从中可以知道要从数据库加载到 div 中的数据。下面是代码

<div class="pricepop"></div>
<div class="pricetab">
<table class="table">
                <thead>
                    <tr>
                      <th>COMMODITIES</th>
                      <th>UNITS</th>
                      <th>INTERNATIONAL PRICE($)</th>
                      <th>TERMS</th>
                      <th>LOCAL PRICE (&#8358;)</th>
                      <th>AS AT</th>
                      <th>MARKET</th>
                      <th>Full Details</th>
                    </tr>
                </thead>
                <tbody>
                <style>
                .table > thead > tr > th, .table > tbody > tr > td {
                    font-size: 10px !important;
                    font-family: 'Lato', sans-serif;
                    font-weight: bold;
                }
                </style>
                  <?php
                  $sql = $db->prepare("SELECT * FROM commodityprices");
                  $result = $sql->execute();
                  while ($row = $result->fetchArray(SQLITE3_ASSOC))
                  {
                      $id = $row['id'];
                      $_SESSION['id'] = $id;
                      $name = $row['name'];
                      $unit = $row['unit'];
                      $iprice = $row['iprice'];
                      $lprice = $row['lprice'];
                      $irate = $row['irate'];
                      $lrate = $row['lrate'];
                      $terms = $row['cterms'];
                      $asat = date('d/M/Y');
                      $market = $row['market'];

                          echo '<tr>
                          <td>'.$name.'</td>
                          <td>'.$unit.'</td>';
                          if ($irate == "Down")
                          {
                              echo '
                              <td style="background: #ef5a66; color: #fff"><i class="fa fa-caret-down"> </i> '.$iprice.'</td>';
                          }
                          else
                          {
                            echo '
                            <td style="background: #28bc88; color: #fff"><i class="fa fa-caret-up"> </i> '.$iprice.'</td>';
                          }
                          echo '<td>'.$terms.'</td>';
                          if ($lrate == "Down")
                          {
                              echo '
                              <td style="background: #ef5a66; color: #fff"><i class="fa fa-caret-down"> </i> '.$lprice.'</td>';
                          }
                          else
                          {
                            echo '
                            <td style="background: #28bc88; color: #fff"><i class="fa fa-caret-up"> </i> '.$lprice.'</td>';
                          }
                          echo '<td>'.$asat.'</td>
                          <td>'.$market.'</td>
                          <td><a class="comprice" href="pricedetails.php?id='.$id.'">View more</a></td>
                          </tr>';
                  }                 
                  ?>
                </tbody>
                </table>
</div>

下面我有一个javascript,可以在点击链接时将数据从数据库加载到.pricepop

$(document).ready(function() {
    $(".comprice").on("click", function (e) {
        e.preventDefault();
        $(".pricepop").load("pricedetails.php");
    });
});

下面是获取剩余价格详细信息的pricedetails.php代码。

                  <thead>
                    <tr>
                      <th>COMMODITIES</th>
                      <th>TERMS</th>
                      <th>LOCAL PRICE (&#8358;)</th>
                      <th>AS AT</th>
                      <th>MARKET</th>
                      <th>Price/bag</th>
                    </tr>
                </thead>
                <tbody>
                <style>
                .table > thead > tr > th, .table > tbody > tr > td {
                    font-size: 10px !important;
                    font-family: 'Lato', sans-serif;
                    font-weight: bold;
                }
                </style>
                  <?php
                  $priceId = $_SESSION['id'];
                  $sql = $db->prepare("SELECT * FROM commodityprices WHERE id = ?");
                  $sql->bindParam(1, $priceId, SQLITE3_INTEGER);
                  $result = $sql->execute();
                  while ($row = $result->fetchArray(SQLITE3_ASSOC))
                  {
                      $id = $row['id'];
                      $name = $row['name'];
                      $iprice = $row['iprice'];
                      $lprice = $row['lprice'];
                      $lrate = $row['lrate'];
                      $terms = $row['cterms'];
                      $asat = date('d/M/Y');
                      $market = $row['market'];
                      $priceperbags = $row['priceperbags'];

                          echo '<tr>
                          <td>'.$name.'</td>';
                          echo '<td>'.$terms.'</td>';
                          if ($lrate == "Down")
                          {
                              echo '
                              <td style="background: #ef5a66; color: #fff"><i class="fa fa-caret-down"> </i> '.$lprice.'</td>';
                          }
                          else
                          {
                            echo '
                            <td style="background: #28bc88; color: #fff"><i class="fa fa-caret-up"> </i> '.$lprice.'</td>';
                          }
                          echo '<td>'.$asat.'</td>
                          <td>'.$market.'</td>
                          <td class="comprice">'.$priceperbags.'</td>
                          </tr>';
                  }
                  ?>
                </tbody>
                </table> 
</div>

现在的问题是,无论我从回显的 php 数据中点击哪个链接,.pricepop 中显示的数据都是最后 echo 的详细信息 链接。

如何解决此问题,以便当我单击链接时,从该链接的 id 获取的详细信息是 echo 并显示在 .pricepop.

最佳答案

您必须使用 AJAX POST 或 GET 语句来获取您需要的内容。简单的 jQuery .load() 无法帮助您。

在基础知识中,您必须执行某种分页来加载或附加新数据。

以下是示例:

http://itsolutionstuff.com/post/php-infinite-scroll-pagination-using-jquery-ajax-exampleexample.html http://phppot.com/php/ajax-pagination-with-php/

关于javascript - 在同一页面的 div 中加载 PHP 回显链接的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47740085/

相关文章:

javascript - 用户输入时换行

javascript - 如何在imacros中获取全局javascript变量?

javascript - Angular 5 - HttpClient 服务 - 组件未获取数据

php - 如何将 AJAX 响应结果返回到主页

javascript - 移动折叠 Bootstrap 在 Chrome 中不起作用

javascript - 获取 span 元素的名称属性

javascript - Chart.js 找到交点并画一个圆

javascript - 如何比较插件内部的 ID?

html - 引用 CSS 类

html - 将表格标签格式复制到 ul 和 li 标签