組合JQuery和PHP

Question

我正在製作一個帶有文字幻燈片的項目。 我在頁面中有一個主div，其中包含每張幻燈片的文本。 我將內容保存在數據庫中。 我想做這個操作： 當我點擊箭頭查看下一張幻燈片時，PHP從數據庫中捕獲內容並將其保存在一個變量中。 然後用JQuery，我用變量替換maindiv的內容。

有可能嗎？如果不是，我該怎麼做？

Answer 1

使用ajax請求來模擬post請求，並用php解析信息。你最終會像這樣的成才：

<?php 
if(isset($_POST["slide"] ) { 
    // Database stuff 
    // Echo back 
    echo "Information that you need to get in jQuery"; 
} 
?> 
<script> 
$("button.next_slide").click(function(){ 
    var ajax; 
    if (window.XMLHttpRequest) { 
    ajax = new XMLHttpRequest(); 
    } else { 
    ajax = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    ajax.onreadystatechange = function() { 
    if (ajax.readyState==4 && ajax.status==200) { 
     document.getElementById("some_element").innerHTML = ajax.responseText; 
    } 
    } 
    ajax.open("POST","this_page.php?slide=1&foo=bar&bar=foo",true); 
    ajax.send(); 
}); 
</script> 

<button class="next_slide">Next slide</button> 
<div id="some_element"></div> 

注：這可能沒有jQuery的完成，或者用jQuery的$.ajax方法。在這裏閱讀更多：http://api.jquery.com/jquery.ajax/

Answer 2

在我的理解中，當用戶點擊一個特定的按鈕然後將其加載到div中時，我們可以通過jQuery ajax和PHP實現它。

HTML

<div class="main_div"> 
<ul id="list"><!-- Our content will load here --></ul> 
<a href="#" class="call_ajax">Next</a> 
</div> 

jQuery的

jQuery(document).ready(function($){ 
    $('.call_ajax').on('click', function(e){ 
      e.preventDefault(); 
      $.post('ajax.php', { get_slide: true }, function(response){ 
       // We are telling jQuery to parse response as json because in ajax.php we have used json_encode function. 
       var data = jQuery.parseJSON(response); 
       $("#list").append('<li>' + data['slide'] + '</li>'); 
      }); 
    }) 
}) 

PHP ajax.php

if(isset($_POST['get_slide'])){ 
    //Get slide from db and output it as json, but currently for example purpose we assume that we have a array. 

    $data['slide'] = 'Your slide text'; 
    echo json_encode($data); die(); // We have used die because we don't won't our script to run any more. 
} 

我沒有測試它，但它會W¯¯掃。