刷新 <div id=“RefhreshableDiv”> 內容點擊按鈕

Question

讓我直接說清楚。
在我網站的某個地方，我有以下代碼：

<?php  
echo '<div id="RefreshableDiv">';
/* performs changes to database,
   depending on whether button1 was clicked or not 
   with the help of: if (isset($_POST['button1'])) */

/* retrieves information from database */   

/* creates a button with id="button1", with background image 
   depending on retrieved database information */

echo '</div>';
?>

我正在嘗試為我的網站提供以下功能：

用戶單擊button1
只有<div>中id "RefreshableDiv"的頁面部分才被刷新（結果button1背景圖像發生了變化。）

我正在嘗試做的甚至有可能嗎？ 我認為我期望使用ajax。

Answer 1

好的，首先要有一個頁面，其中有數據庫更改和您需要的東西，並將其命名為： pagerefrech.php以免說出它的代碼如下：

<?php 
//selecting fr database and doing what do you want to do
//this page will return whats gonna be inside the div
//to get the parameter sent by $.post you use $_POST['nameofparam']
//exemple : 
  echo "THIS IS THE CONTENT OF THE DIV";
?>

並且您的按鈕cilck事件是：

$('#button').click(function(){
    $.post(//or $.get if you want to use GET request
    "pagerefrech.php",//path to teh page
    {
    param1  : value1 ,
    param2 : value2//for sending some post vars if you dont want to set it to null
    },
    function(data){//data contains the contenet returned by the page "pagerefrech.php"
    $('#RefreshableDiv').html(data);
    //change here the background image of the button
    $('#button1').css({"background-image" : "yourvaluegoeshere"});
    });//end of $.post function
});//end of button1.click

說明： $ .post發送POST請求到頁面pagerefrech.php獲得結果param1和param2和param3 .....是paramers，如果不可以，則可以添加它們以將它們發送到頁面，您可以將其設為{}里面沒有任何東西，這就像您要發送POST變量（例如輸入或選擇值）一樣。

簡單示例：使用以下代碼創建一個名為test.php的頁面：

<?php echo "cotent recieved"; ?>

使用此代碼創建一個html頁面

<html>
<head>
</head>
<body>
<input type="button" value="test" id="but1" />
<div id="refrech"></div>
<script>
$(document).ready(function(){
 $('#but1').click(function(){
        $.post(
        "test.php",
        {
        },
        function(data){
        $('#refrech').html(data);
        });
    });
});
</script>
</body>
</html>

PS：別忘了在測試中將jquery庫添加到頁面中，希望它很清楚

刷新 <div id=“RefhreshableDiv”> 內容點擊按鈕

問題描述

1 個解決方案

解決方案1
1 已采納 2014-10-02 11:34:14

刷新 <div id=“RefhreshableDiv”> 內容點擊按鈕

問題描述

1 個解決方案

解決方案1 1 已采納 2014-10-02 11:34:14

解決方案1
1 已采納 2014-10-02 11:34:14