我正在尝试做一个Ajax演示来自学这个概念，但我就是无法让它工作。
我试图获得的示例是在第一页上获取一个变量（在本例中为绿色），如果单击了绿色按钮，请在 ajax 处理页面上使用它以某种方式记录单击了绿色按钮（当前在错误日志中，然后我将继续将其存储在数据库中）。
理想情况下，我希望能够重复使用相同的代码片段将变量更改为红色，并让错误日志报告按下红色按钮。
我使用location.reload和随机数向自己证明javascript正在执行，并且每次加载页面都不同。
我根本不是一个JavaScript的人，你也许能看出来。我需要先声明一个变量还是完全声明其他变量？
最丑.php
<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<!-- jQuery Ajax -->
<script type="text/javascript">
function clickyes(a) {
$.ajax({
type: "POST",
url: "./ajax.php",
data: {"test":a},
success: function (response) {
default = $("#default").val();
});
location.reload();
}
</script>
<script type="text/javascript">
function clickno() {
location.reload();
}
</script>
<?
echo mt_rand(0,99);
$result = "green";
echo "<p><form>here's a $result button. Do you want click on it?</p>";
echo "<button onclick='"clickyes(" . $result . ")'" style='"background-color: $result; '">Yes</button>";
echo "<button onclick='"clickno()'">No</button></form>";
?>
阿贾克斯.php
<?
$test = $_POST['test'];
error_log($test, 0);
?>
这里location.reload将在不等待 ajax 请求的情况下被调用，因为 ajax 是一个异步函数。这可能是问题所在。在 ajax 响应成功时保持重新加载。
function clickyes(a) {
$.ajax({
type: "POST",
url: "./ajax.php",
data: {"test":a},
success: function (response) {
default = $("#default").val();
location.reload();
});
}
Also Change this:
echo "<button onclick='"clickyes('" . $result . "')'" style='"background-color: $result; '">Yes</button>";
更改如下：
function clickyes(a) {
$.ajax({
type: "POST",
url: "./ajax.php",
data: {test:a},
success: function () {
location.reload();
}
});
}
在这里：
echo "<p><form>here's a $result button. Do you want click on it?</p>";
echo "<button onclick='"clickyes('$result')'" style='"background-color: $result; '">Yes</button>";
echo "<button onclick='"clickno('$result')'">No</button></form>";
让它工作。万岁！
<script src="https://code.jquery.com/jquery-2.2.3.js"></script>
<form><p id="color-info">here's a button. Do you want click on it?</p>
<button color="" id='yesbutton'>Yes</button>
<button >No</button></form>
<script type="text/javascript">
setColor();
// this code will be invoked when #yesbutton is clicked and this is called dedication method
$(document).on('click','#yesbutton',function(e){
e.preventDefault();
$.ajax
({
type: "POST",
url: "./ajax.php",
data: {"test":$('#yesbutton').attr('color')},
success: function (response) {
//default = $("#default").val();
//change color after success
setColor();
}
});
});
// function first determine rgb color to create composite color
function setColor()
{
//redcolor code
$redcolor=Math.random()*255;
// green color code
$greencolor=Math.random()*255;
//blue color code
$bluecolor=Math.random()*255;
//this will set the background color for first time
$rgb=parseInt($redcolor)+','+parseInt($greencolor)+','+parseInt($bluecolor);
$('#color-info').text("here's a rgb("+$rgb+") button. Do you want click on it?");
$('#yesbutton').css("background",'rgb('+$rgb+')');
//this will set the color attribute for first time
$('#yesbutton').attr('color',$rgb);
}
</script>