内容-6ren"> 内容-让我开门见山。 在我的网站的某个地方我有以下代码: '; /* performs changes to database, depending on whether button1 was cl-6ren">
gpt4 book ai didi

javascript - 单击按钮刷新
内容

转载 作者:行者123 更新时间:2023-11-28 00:56:29 25 4
gpt4 key购买 nike

让我开门见山。
在我的网站的某个地方我有以下代码:

<?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 的使用。

最佳答案

好的,首先有一个页面,其中包含数据库更改和您需要的内容并为其命名类似于: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 变量(如输入或选择值)完全相同.

简单示例:使用以下代码创建一个名为 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 库添加到测试中的页面,希望它是清楚的

关于javascript - 单击按钮刷新 <div id ="RefhreshableDiv"> 内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26159821/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com