使用 jQuery ajax 创建动态表

Question

我遇到了一个奇怪的问题...我正在使用来自 ajax 调用的数据动态创建表。代码在 Firefox 中有效/但在 Chrome 中失败...

我打算创建的HTML结构：

<title>Offers MADE<title>    
 <Table>
   proposed offer table
 </table>

<title>Offers Received<title>    
  <Table>
   Received offer table
 </table>

但这是我在 Chrome 上得到的结果/虽然它适用于 Firefox..

<title>Offers MADE<title>       

<title>Offers Received<title>  

  <Table>
   proposed offer table
 </table>

  <Table>
   Received offer table
 </table>

我认为这与 ajax 调用响应时间有关； 因为如果我放置一个断点，它总是可以解决的..

为了确保 ajax 调用顺序正确，我在第一个 AJAX 调用的 success() 函数中进行了第二个 AJAX 调用。

 $.ajax{
    ::
    url : get_Proposed_Offers.php
    ::

    success : function(data)
      {
          //I make sure that the Proposed Offer Table gets populated
          //I populate the "div" tag with required HTML
          populate_Proposed_OfferTable();


          //Here's where I make another ajax call to populate 
          get_Received_OfferData();
      }

 }

 function get_Received_OfferData()
 {
    $.ajax{
    ::
    url : get_Received_Offers.php
    ::

    success : function(data)
      {
          populate_Received_OfferTable();              
      }

    }

 }

谁能指出我在这里做错了什么？

我知道，如果我开始在不同的标签中填充“提议的”和“收到的”报价，而不是使用相同的标签，这应该可以解决我的问题。但我想知道为什么这种方法行不通。

Answer 1

为什么需要两个 ajax 调用？我将进行一次 ajax 调用并让我的 php 以 JSON 格式发送两个数组的数据

 $.ajax({

   url:'populate_tables.php',
   dataType :'JSON',
   success: function(data){

   $.map(data.proposed.records,function(proposed_row,i){
      populate_proposed_table here
   }
   $.map(data.recieved.records,function(received_row,i){
      populate_received_table here
   }
  }
})

您甚至可以为您的作品添加其他功能和效果

更新：您可以在一次调用中传递任意数量的参数。

$.ajax({
 ........
 data:{param1:value1,param2:value2....},
})

而php会将数据视为数组，所以

<?php
   $param1 = $_REQUEST['param1'];//not sure if you are using post or get
   $param2 = $_REQUEST['param2']...

从这里运行您的查询