使用 ajax 检索记录并在 php 中显示它们

Question

我目前有一个运行良好的网页。我选择我的负载编号，然后 ajax 查询获取信息并将结果放入文本框中。该页面拆分，一个部分显示信息，但选择“打印”时，它将结果格式化以打印泡沫纸。

这就是问题所在。我宁愿只显示为普通文本，而不是在文本框中显示“屏幕上”结果。

活动页面位于this address

检索代码比较长，这里是一个示例。

<script>

  $(document).ready(function(){ /* PREPARE THE SCRIPT */

    $("#loads").change(function(){ /* TRIGGER THIS WHEN USER HAS SELECTED DATA FROM THE SELECT FIELD */

      var loadnumber = $(this).val(); /* STORE THE SELECTED LOAD NUMBER TO THIS VARIABLE */

      $.ajax({ /* START AJAX */

        type: "POST", /* METHOD TO USE TO PASS THE DATA */
        url: "actionprt.php", /* THE FILE WHERE WE WILL PASS THE DATA */
        data: {"loadnumber": loadnumber}, /* THE DATA WE WILL PASS TO action.php */
        dataType: 'json', /* DATA TYPE THAT WILL BE RETURNED FROM action.php */
        success: function(result){
          /* PUT CORRESPONDING RETURNED DATA FROM action.php TO THESE TEXTBOXES */
    for (i = 1; i < 14; i++) { 
        $("#prtDescription" + i).val("");
        $("#prtMethod" + i).val("");
        $("#prtPONumber" + i).val("");
        $("#prtGallons" + i).val("");
        $("#prtAmount" + i).val("");
    } 

      $("#NumberStops").val(result.NumberStops);
      $("#ShipperName").val(result.CustomerName);
      $("#prtship").val(result.CustomerName);
      $("#ShipperAddr1").val(result.CustomerAddress);
      $("#ShipperAddr2").val(result.CustomerAddress2);
      $("#ShipperCity").val(result.CustomerCity);
      $("#prtshipcity").val(result.CustomerCity);
      $("#ShipperState").val(result.CustomerState);
      $("#prtshipstate").val(result.CustomerState);
      $Phone = result.CustomerPhone
  $Phone = '(' + $Phone.substring(0,3) + ') ' + $Phone.substring(3,6) + '-' + $Phone.substring(6,10)
      $("#ShipperPhone").val(result.CustomerPhone);
      $("#ShipperContact").val(result.CustomerContact);
      $("#PickupDate").val(result.PickupDate);
      $("#prtdate").val(result.PickupDate);
      $("#PickupTime").val(result.PickupTime);
      $("#CustomerPO").val(result.CustomerPO);
      $("#Weight").val(result.Weight);
      $("#prtweight").val(result.Weight);
      $("#Pieces").val(result.Pieces);
      $("#prtpieces").val(result.Pieces);
      $("#BLNumber").val(result.BLNumber);
      $("#prtbol").val(result.BLNumber);
      $("#TrailerNumber").val(result.TrailerNumber);
      $("#prttrailer").val(result.TrailerNumber);

...

我尝试了 document.write() 但清除了我不想要的页面。我想在页面上保留我的图像和组合框选择框，以便我可以在需要时选择其他加载，而不是一次只选择一个。

请帮助....如果您需要更多信息来回答问题，请提出，我会发布。

Answer 1

为什么不在加载选择后创建一个新的 div 并将所有这些结果附加到其中？

Answer 2

根据您的要求，有不同的选项可以使用 Ajax。您可以用新数据或整个 HTML 替换整个 div，也可以单独更改所选部分。由您自己选择合适的方法，这对您来说很容易。

这些是可用的方法：

方法一：

function testAjax(handleData) {
  $.ajax({
    type: 'POST'  
    url:"yourpostpage.php", 
    data: "&s=1", 
    success:function(data) {
      handleData(data); 
    }
  });
}

上述方法将用您的流程完成后可用的数据替换 Ajax 成功。

方法二：

function testAjax(handleData) {
  $.ajax({
    type: 'POST'  
    url:"yourpostpage.php", 
    data: "&s=1", 
    success:function(html) {
      handleData(html); 
    }
  });
}

上述函数会将整个成功 div 替换为新的 HTML 部分。

现在我将通过一个简单的示例来说明如何使用 PHP 替换 div 和使用 AJAX 替换 HTML。

场景：用户必须选择城市，城市详细信息将在 Ajax 中加载。

HTML：

<select name="city" onchange="selectcity(this.value)">
    <option value="">Please Select</option>
    <option value="1">USA</option>
    <option value="2">Europe</option>
</select>
<div id="ajax_output">
</div>

在选择城市时，它会通过在jQuery中使用onchange属性来加载函数，并且会传递Ajax。

JS：

function selectcity(a) {
  $.ajax({
    type: 'POST'  
    url:"yourpostpage.php", 
    data: "&city="+a, 
    success:function(html) {
      $('#ajax_output').html(html);
    }
  });
}

在 JS 中，我使用 a 获取所选值，因为我已将参数传递给函数并将其传递给 Ajax 页面。

Ajax 页面：

注意：确保如果要从 DB 中显示信息，则必须将 DB 文件连接到 Ajax 页面。

<?php
$city_id = $_POST['city']; // Jquery Data that i am retriving on Ajax Page
$select="SELECT * FROM TABLENAME WHERE `city_id`='".$city_id."'";
$query = $con->query($select);
$count = $query->num_rows;
if($count==0)
{
    echo 'No Data Found';
}
else
{
    while($fetch = $query->fetch_assoc())
    {
    ?>
        <div class="col-sm-6">
            <label>City</label>
            <span><?php echo $fetch['city_name']; ?></span>
        </div>
        <div class="col-sm-6">
            <label>Place</label>
            <span><?php echo $fetch['place']; ?></span>
        </div>
    <?php   
    }
}
?>

现在在我的示例中，我将用来自 Ajax 页面的内容替换 #ajax_output div。

根据问题中提出的要求，我希望这将是最简单的方法，这样 PHP 与 JS 相比执行速度更快，并且使用此方法时错误也将最小化。

希望我的解释对您来说很清楚，如果您在开发过程中遇到任何障碍，请让我分享想法，我会为您提供解决方案。

快乐编码:)