如何使用ajax将多个值转换为不同的Div

时间:2013-10-24 06:10:54

标签: javascript php jquery html ajax

这对我来说有点复杂,我仍然是新手大声笑。考虑以下代码块。 Jquery的Ajax循环php块并将新的feed添加到某个div。在这种情况下,PHP返回多个结果作为示例,它返回“Name”和“Slogan”。在ajax收到结果后,我想附加以下作为模板,但哪里有PHP      成为一个变量,因为每次附加此模板时它都会改变。这是html模板。

<div id="BuzFeedResult1">
<?php 
require_once 'php/db_conx.php';
$Result = mysql_query("SELECT * FROM profiles ORDER BY lastupdated DESC LIMIT 1") or  die (mysql_error());
while($row = mysql_fetch_array($Result))
{ ?>
          <div id="ProfileDiv">
            <div>
            <span class="flat-menu-button"><?php echo $row['name'];?></span>
            <span class="flat-menu-button"><?php echo $row['slogan'];?>
            </span>

<?php 
}?>
            </span>
            </div>
            </div>
    </div>

问题。我如何将上述模板放入此div中的ajax。

var $buzfeedresults = $("<div id='BuzFeedResult" + counter + "'></div>");

然后相应地添加它,就像下面添加“div”一样。

var get_fb = (function() {
    var counter = 0;

    var $buzfeed = $('#BuzFeed');

    return function(){
        $.ajax({

        type: "POST",

        url: "../php/TopBusinesses_Algorythm.php"

     }).done(function(feedback) {

          counter += 1;

          //Divs being appended.

          var $buzfeedresults = $("<div id='BuzFeedResult" + counter + "'></div>");

          $buzfeedresults.text(feedback);

          $buzfeed.append($buzfeedresults);

          var $buzfeedDivs = $buzfeed.children('div');

          if ($buzfeedDivs.length > 10) { $buzfeedDivs.last().remove(); }

          setTimeout(get_fb, 4000);

    }).fail(function(jqXhr, textStatus, errorThrown) {

         var $buzfeedresults = $("<div id='BuzFeedError'></div>");

         $buzfeedresults.text('Error: ' + textStatus);

         if (typeof console !== 'undefined') {

         console.error(jqXhr, textStatus, errorThrown);
       }

   });

   };

   })();

   get_fb()

这个问题可能听起来不清楚,请在需要时询问清晰度。如果Json可以更整洁更短,请建议我可以使用的结构。

2 个答案:

答案 0 :(得分:1)

你可以通过split()函数和响应来实现。

var response = "yes|||insert a title...and something more!"
var splitResult=response.split("|||");  
var yesNo=splitResult[0];  
var article=splitResult[1];
alert(yesNo+article);

答案 1 :(得分:1)

更好的解决方案是分割结果,在../php/TopBusinesses_Algorythm.php中对结果数据进行json_encode,然后您可以在done(function(feedback) { ... })函数中解码结果,并为每个DIV单独更新HTML内容。

您的JS代码示例:

function holdSession() {
  $.ajax({
    type: 'POST',
    url: '../php/TopBusinesses_Algorythm.php',
    success: function(data) {
      var ajax_data = jQuery.parseJSON(data);

      $('#total_count').html(ajax_data.total_count);
      $('#online_count').html(ajax_data.online_count);
      $('#online_users_count').html(ajax_data.online_users_count);
    }
  });

  setTimeout("holdSession()", 30000);
}

TopBusinesses_Algorythm.php代码示例:

// here get your data and store it in a array, f.e.:
$result = array();

$result['total_count']        = 1000;
$result['online_count']       = 10;
$result['online_users_count'] = 5;

// finally output result using `json_encode` - {"total_count":1000,"online_count":10,"online_users_count":5}
echo json_encode($result);

第二个解决方案:

您的JS代码:

var counter = 0;

var get_fb = (function() {
  var $buzfeed = $('#BuzFeed');

  return function() {
    $.ajax({
      url: "../php/TopBusinesses_Algorythm.php"
    }).done(function(feedback) {
      counter += 1;

      //Divs being appended.

      var $buzfeedresults = $("<div id='BuzFeedResult" + counter + "'></div>");

      $buzfeedresults.html(feedback);

      $buzfeed.append($buzfeedresults);

      var $buzfeedDivs = $buzfeed.children('div');

      if ($buzfeedDivs.length > 10) {
        $buzfeedDivs.last().remove();
      }

      setTimeout(get_fb, 4000);
    }).fail(function(jqXhr, textStatus, errorThrown) {
      var $buzfeedresults = $("<div id='BuzFeedError'></div>");

      $buzfeedresults.text('Error: ' + textStatus);

      if (typeof console !== 'undefined') {
        console.error(jqXhr, textStatus, errorThrown);
      }
    });
  };
})();

get_fb();

TopBusinesses_Algorythm.php:

<?php 
require_once 'php/db_conx.php';

$result = mysql_query("SELECT * FROM profiles ORDER BY lastupdated DESC LIMIT 1") or die (mysql_error());

while ($row = mysql_fetch_array($result)) {
  echo '<div id="ProfileDiv">';
    echo '<div>';
      echo '<span class="flat-menu-button">'.$row['name'].'</span>';
      echo '<span class="flat-menu-button">'.$row['slogan'].'</span>';
    echo '</div>';
  echo '</div>';
}
?>