ajax-调用ajax调用

Question

我遇到了无法解决的问题。部分是因为我无法用正确的术语来解释它。我是新手，对这个笨拙的问题感到抱歉。

您可以在下面看到我的目标概述。我想从数据库中搜索一些东西（使用ajax）并在搜索下方的div中显示结果。我可以让这个工作。但现在，我希望能够点击结果并将其放在页面顶部的div中。 我了解到ajax无法处理这种操作是正常的，并且不可能将jquery或其他ajax调用运行到ajax调用中。 我还阅读了关于jquery live（）的事情来解决这个问题。

我还不清楚如何让事情发挥作用。

是否有可能让我走上正轨？我错过了教程吗？

谢谢你！

第一步

<div id="top">here comes an image</div>

<textfield> for the ajax search string + a button </textfield>

<div id="search">target of the ajax-search</div>

第二步：搜索后我们得到这个

<div id="top">here comes an image</div>

<textfield> for the ajax search string + a button </textfield>

<div id="search">result 01 with link to a php-file: a
                 result 02 with link to a php-file: b ... </div>

步骤树：点击结果01或02 ...

<div id="top">content of php-file: a</div>

<textfield> for the ajax search string + a button </textfield>


<div id="search">result 01 with link to a php-file: a
                 result 02 with link to a php-file: b ... </div>

好的，这是（相关）代码的一部分

search_page.php

<div id=top"></div>


<div class="client_search_field">
<form id="ui_element" class="sb_wrapper" action="" method="post" name="search_ID" ONSubmit="xmlhttpPost('search_stream_client_v02.php', 'ui_element', 'txtHint', '<img src=\'images/wait.gif\'>'); return false;">
  <p> <span class="sb_down"></span> 
    <input name="search_string" type="text" class="sb_input" id="search_string" value="<?php echo $_POST['search_string']; ?>"/>
          <button type="submit" class="submitmag" id="search_submit" > </button>
          </p>
</div>      


<span id="txtHint"></span>

search_stream_client_v02.php

<?php
$sql .= "SELECT *";
$sql .= ", MATCH(description, keywords) AGAINST ('".$_POST['search_string']."')  AS score FROM archief WHERE MATCH(description, keywords) AGAINST('".$_POST['search_string']."' IN BOOLEAN MODE)"; 
$sql .= " AND showa = '1' "; 
$sql .= $q_sort." ".$q_order." LIMIT 0,".$q_num_result; 

$result04 = mysql_query($sql) or die(mysql_error());

while ($row04 = mysql_fetch_assoc($result04)){
        $hint .= "<div class=\"tb-kader\">";
        $hint .= "<span id=\"".$row['thumbnail']."\">";

        $hint .= "<a href=\"".$row04['link']."\" class=\"fra tooltip lazy\" id=\"".$row04['ID']."\" TITLE=\"header=[".$row04['headline']."] body=[".$row04['description']."]\">";       

        $hint .= "<img src=\"$row04[thumbnail]\" border=\"0\" alt=\"".$row04['headline']."\"/></a>";

        $hint .= "<div class=\"tb-kader-price\">".$pic_list_solo_final[$items03]['prijs']." &euro;</div></span>";   
        $hint .= "</div>";

}

echo $hint;
?>

所以，最后

<a href=\"".$row04['link']></a> 

应该在

中打开

<div id="top"></div>

谢谢你们的努力!!

修改

这个不起作用：

$('#search').delegate(".fra", "click", function() {
    $("#top").attr("src","href");   
    });

Answer 1

$('#search').delegate(".fra", "click", function() {
    $("#top").attr("src","href");   
});

这样做只是将#top的scr属性设置为“href”。那不是你想要的;）我想你需要的是：

$('#search').delegate(".fra", "click", function() {
    var link = $(this),
    url = link.attr("href");
    $.ajax({
       url: url,
       dataType: "html",
       success: function(data) {
         $("#top").html(data);
       }
    })
});

Answer 2

所以你想做类似的事情：

$('.search-result-class').live('click', function() {
   //this binds to the click of each result. So you can do an ajax call here and on the success callback you could then load the result into the div
});

Answer 3

或者您可以使用.delegate，如下所示：

HTML

<div id="search">
   <a href="phpfilea.php" class="result">result 01 with link to a php-file: a</a>
   <a href="phpfileb.php" class="result">result 02 with link to a php-file: b ... </a>
</div>

JS

// binds a click event on each result, even if they've been loaded via ajax
$('#search').delegate(".result", "click", function() {
   var link = $(this),
   url = link.attr("href");

   // do your ajax magic...
   $.ajax({url: url...})
});

这与Victor的回答基本相同，但我认为.delegate的表现更为出色。