javascript - 使用 JavaScript 在 div 上加载 php 页面

Question

尝试将 php 结果(来自不同页面)加载到单击链接的同一页面上的 div

我尝试按照 here 中的答案进行操作

但这对我不起作用。以下是我尝试过的

价格.php

<div class="pricepop"></div>

<?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>//Link to dispaly more results
</td>
                          </tr>';
             }

pricedetails.php

<?php
                  $priceId = $_GET['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>';
                  }

JavaScript

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

当我点击 price.php 中的查看更多链接时，pricedeatils.php 中的结果应该显示在 .pricepop div (位于price.php 页面中)，但是当我当前单击时，.pricepop 为空白。请问我该如何解决这个问题？谢谢。

Answer 1

您的代码未加载正确的网址。修改后，id参数成为url的一部分。

请使用此 js 脚本。

$(document).ready(function() {
    $(".comprice").on("click", function (e) {
        e.preventDefault();
        $(".pricepop").load($(this).attr('href'));
    });
});