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向页面pagerefrech.php发送POST请求并获取结果 param1和param2和param3 .....是参数，你可以添加它们以将它们发送到页面，如果没有你可以让它作为{}没有任何内部，这就像你发送POST变量，如输入或选择值

SIMPLE EXEMPLE： 使用以下代码创建名为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>刷新<div id =“RefhreshableDiv”>内容

1 个答案: