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，也可以单独更改所选部分。你必须选择合适的方法，这对你来说很容易。

这些是可用的方法：

方法1：

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

上述方法将使用您的流程完成后可用的数据取代Ajax成功。

方法2：

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

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

现在我将用一个简单的例子说明如何使用AJAX使用PHP和HTML替换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页面：

注意：确保如果要从数据库中显示信息，则必须将数据库文件连接到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相比执行得更快，并且当您使用此方法时，错误也将是最小的。

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

快乐编码：）

使用ajax检索记录并在php

2 个答案: