使用ajax检索记录并在php中显示它们 - retrieve records using ajax and display them in php

我目前有一个网页，工作很好。我选择我的加载号和ajax查询获取信息，并将结果放在文本框中。页面被分割，一部分显示信息，但当选择"打印"时，它将格式化结果以打印气泡表。

问题在这里。而不是在文本框中显示"On Screen"的结果，我宁愿只是显示为普通文本。

活动页面位于此地址

检索代码相当长，这里是一个示例。

<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()，但这清除了不是我正在寻找的页面。我想保持我的图像和组合框选择框在页面上，所以我可以选择其他加载时需要，而不是一次只有一个。

请帮…如果你需要更多的信息来回答这个问题，请问，我会张贴。

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

根据您的需求使用Ajax有不同的选项。您可以用新的Data或整个HTML替换整个div，也可以单独更改所选部分。这取决于你必须选择合适的方法，这对你来说是容易的。

以下是可用的方法:

方法1:

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); 
    }
  });
}

上面的函数将用新的HTML部分替换整个successdiv。

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

场景:用户必须选择城市，城市详细信息将在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_outputdiv。

根据问题中的请求，我希望这将是最简单的方法，以便PHP在与JS相比执行得更快，并且当您使用此方法时，错误也将最小化。

希望我的解释对你来说是清楚的，如果你在发展中遇到任何障碍，让我分享我的想法，我会为你提供一个解决方案。

Happy Coding:)