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-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 2

或者你可以使用.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 的性能更高。

Answer 3

$('#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);
       }
    })
});