使用Ajax調用函數？

我想要達成的目標 我有一些我想展示的作品。所以，我有這些縮略圖。當訪問者點擊縮略圖時，我想要一個div（稱爲slickbox）打開並顯示標題，描述和關於單擊的工作的滑塊。使用Ajax調用函數？

我已經完成了什麼以及如何執行 我從數據庫中獲取工作數據。這是我的作品上市的少部分：

的index.php

<?php 
    $retour_messages = mysql_query('SELECT 2K13_works.*, 2K13_categories.nom AS nomCAT FROM 2K13_works, 2K13_categories WHERE 2K13_works.cat_id = 2K13_categories.cat_id ORDER BY 2K13_works.record_date DESC') or die(mysql_error());//requete sql pour récupérer les works de la page 
    ?> 
    <ul id = "creations" class = "step"> 
    <?php 
    while($donnees_messages=mysql_fetch_assoc($retour_messages)){ 
    echo '<li class = "step '.$donnees_messages['nomCAT'].'" id="'.$donnees_messages['work_id'].'"> 
       <div class = "item"><a href = "#"><img src = "'.$donnees_messages['thumbLink'].'" alt = "'.$donnees_messages['titre'].'" title = "" width = "226" height = "147"/></a> 
       <div class = "caption"> 
        <h3>'.$donnees_messages['titre'].'</h3> 
        <p>'.html_entity_decode($donnees_messages['resume'],ENT_QUOTES,'UTF-8').'</p> 
        <p id = "desc" class = "hidden">'.html_entity_decode($donnees_messages['description'],ENT_QUOTES,'UTF-8').'</p> 
        <!--<p id = "idw" class = "hidden">'.$donnees_messages['work_id'].'</p>--> 
       </div> 
       </div> 
      </li>'; 
      } 
?> 
    </ul>

正如你所看到的，我有一個包含李tagfor各項工作的UL標籤。每個li標籤都包含數據庫中工作的id，每個li包含h3標籤和p標籤，其中包含我想要在slickbox中顯示的文本（對於圖像，稍後會看到）。

現在，對於slickbox我的JavaScript代碼，出現和消失：

front_functions.js

//_____________SLICKBOX__________________________________ 
$('#slickbox').hide(); 
$("#creations li").click(function(e) { 
    // shows the slickbox on clicking the noted link 
    $titre = $(e.target).children("h3").text(); 
    $bla = $(e.target).children("#hidden").text(); 
    $("#description").children("h1").text($titre) ; 
    $("#description").children("p").text($bla); 
     $('#slickbox').slideDown(); 
     e.preventDefault(); 
     $(e.target).empty(); 
     //return false; 
});

此代碼不能正常工作，因爲我slickbox的作品之前加載。所以這就是爲什麼我需要Ajax和發送和執行請求的異步方式。

我在這裏讀取此示例代碼：which is quite helpful。但是，我有一個問題：我正在使用jQuery，我想使用$.ajax()。我真的不明白如何做到這一點。

我必須設置一個XHMLHTTPRequest對象嗎？我可以在哪裏寫Ajax呼叫？我可以調用一個函數，而不是一個URL？

喜歡做的（我不知道）：

$(#creations li).click(function(e){ 
     $.ajax(){ 
      function : "displayContent(id,desc,title)", 
     } 
} 
function displayContent(id,desc,title){ 
    $(#slickBox).children("h1").innerHTML(title); 
    $(#slickBox).children("p").innerHTML(desc); 
    $(#slickBox).show(); 
}

我甚至不知道我是否應該使用JSON（但是，好了，因爲我的數據已經存儲，我只是想顯示他們，我想我不需要Json）。

請給我你的意見和你的高級建議。

來源

2013-03-06 Gaelle

異步編程（即AJAX）往往涉及*回調*。如果您查看'$ .ajax'語法，您可以提供一個函數作爲參數調用。你可以像'$ .ajax（{success：function（data）{...}}）'這樣做。 – 2013-03-06 17:02:27

感謝@WaleedKhan！我會嘗試它，並回來，如果我有問題或謝謝:) – Gaelle 2013-03-12 13:44:58

當你發送一個請求服務器（與Ajax），這就像你提交一個頁面中的表單。
因此，當表單提交時你可以用php做的每件事情，你也可以用ajax來做到這一點。
e.g如果你要調用一個函數在PHP阿賈克斯，只需發送一個參數去PHP的是這樣的：

$.ajax({ 
    type:'POST', 
    data:{ 
    param:'Hey_php_call_this_function' 
    }, 
    success:function(data){ 
    alert('hey jquery , php said : ' + data); 
    } 
});

和服務器端：

if(isset($_POST['param']) && $_POST['param'] == 'Hey_php_call_this_function'){ 
    echo call_a_function(); /// "output to callback success function" = data 
}

希望有所幫助。

來源

2013-03-06 17:11:52

謝謝@Mb Rostami，這是一個小解釋，我可以理解:) 我會盡力寫下我的代碼，我會回來如果我有更多的問題/解決方案。再次感謝您的時間！ – Gaelle 2013-03-12 13:43:45

嗯，我開始工作了，好吧，它給了我相當不錯的結果。我只是有很多與json_encode有關的問題，以獲得結果數組，但我想我可以與我的朋友谷歌處理它。感謝你@Mb Rostami！ – Gaelle 2013-03-12 19:36:20

您的歡迎.... – 2013-03-14 03:45:44

使用Ajax調用函數？

回答

相關問題