我正在尝试创建一个轮盘赌系统,它的工作原理如下:用户单击提交按钮,然后检查opening_case_handler.php文件以查看用户的帐户中是否有足够的资金,如果他有足够的资金,它将回显javascript代码,该代码将为轮盘赌创建动画,并将产生中奖的奖品。出于安全考虑,我在php中执行js代码,所以用户无法访问它,因为它是在服务器端执行的。
这里的问题是,js和jquery代码一旦达到此行代码就不会执行:
var gw = $(".gift").outerWidth(true);
在opening_case_handler.php.中
您将注意到,在我刚才提到的前一行代码之前和之后有两个警报。如果我取消对alert("TEST1")的注释,它将被执行,并出现一条警告消息,但其余代码将不会执行。另外,如果我只取消对警报(“TEST2”)的注释,它将不会被执行,也不会发生任何事情。
以确保javascript代码实际工作。我之前在一个javascript文件中测试了它,并在index.php文件中提供了源代码,它工作得很好。
index.php
此页面包含轮盘赌,其中包含每个项目的所有不同图像。submit按钮在底部。这是一个按钮,用户可以点击它来旋转轮盘赌。
<div class='rafflebox'>
<div class='pointer'></div>
<div class='boxwrapper'>
<ul class='giftwrapper'>
<div class="gift item bg-size2 box-bg3">
<img class="item-product2" src="graphics/mouse.png" draggable="false">
</div>
<div class="gift item bg-size2 box-bg2">
<img class="item-product2" src="graphics/mouse.png" draggable="false">
</div>
<div class="gift item bg-size2 box-bg3">
<img class="item-product2" src="graphics/mouse.png" draggable="false">
</div>
<div class="gift item bg-size2 box-bg4">
<img class="item-product2" src="graphics/mouse.png" draggable="false">
</div>
</ul>
</div>
</div>
<form method="post">
<button type="submit" name="opening_case" class="btn open-box-btn btn-openbox-font button"><img id="lock" src="graphics/iconos/Candado Cerrado Black.png">ABRIR CAJA</button>
</form>
</div>
opening_case_handler.php
<?php
session_start ();
if(isset($_POST['opening_case']))
{
opening_case ();
}
function opening_case ()
{
if ($_SESSION['balance'] >= $_SESSION['box price'])
{
echo '
<script>
//alert("TEST1");
var giftamount = 10;
var gw = $(".gift").outerWidth(true);
//alert("TEST2");
var giftcenter = gw/2;
var cycle = 7;
var containercenter = $(".boxwrapper").outerWidth(true)/2;
for(var i = 0; i <=5; i++)
{
var giftduplicate = $(".giftwrapper").children().clone(true,true);
$(".giftwrapper").append(giftduplicate);
}
$(".button").click(function()
{
alert("You DO have sufficient funds");
var btn = $(this);
btn.hide();
var randomgift = Math.floor(Math.random() * 4) + 1;
var dev = Math.random()*(giftcenter+1);
var distance = giftamount * cycle * gw + (randomgift*gw) - containercenter -24 +dev;
console.log(distance);
$( ".giftwrapper" ).css({left: "0"});
$(".giftwrapper").animate({left: "-="+distance},10000,function()
{
alert("You Won Gift" + randomgift);
btn.show();
});
});
</script>';
} else {
//to be done
}
}
?>
请随时就如何更好地构建这种类型的系统表达您的想法。我对所有的建议都持开放态度,我对此还是个新手。
谢谢你!!
发布于 2018-10-08 03:00:00
如果它只是一个php代码文件。你可以在下面试试。
<?php
echo "some stuff here"
if ($condition){ ?>
<script>
alert("condition true");
</script>
<?php } else { ?>
<script>
alert("condition false");
</script>
<?php }?>
发布于 2018-10-08 03:16:05
当一个表单被提交时,它会将你重定向到PHP页面(即当你在index.php中点击submit时,你会被重定向到opening_case_handler.php ),然后PHP页面会把你带回带有新信息的首页。因此,您的javascript代码会在opening_case_handler.php中打印出来,这就是为什么您的javascript没有执行的原因。此外,您的javascript代码将始终可见,除非您做了一些非常有创意的事情,因此,如果您试图处理任何敏感信息,请使用PHP或您正在使用的任何后端框架。
有一些方法可以解决这个问题,但我建议使用不同的方法来解决这个问题。您可以使用AJAX请求,它基本上以以下方式工作:
这样,您的算法就不会显示出来,而您的客户端( javascript端)只会处理用户输入的信息和来自服务器的结果。
在您的示例中,我们可以使用以下更改来完成此操作
Index.php (现在可以更改为index.html )
<button type="submit" id="opening_case" name="opening_case" class="btn open-box-btn btn-openbox-font button"><img id="lock" src="graphics/iconos/Candado Cerrado Black.png">ABRIR CAJA</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#opening_case").on("click", ()=>{
// $.get( "opening_case_handler.php?opening_case=true", function( data ) {
// console.log(data.funds)
// });
$.ajax({
url: "opening_case_handler.php?opening_case=true",
success: (data)=>{
if(data.funds) {
alert("You DO have sufficient funds")
} else {
("You don't have sufficient funds")
}
},
dataType: "JSON"
});
})
</script>
opening_case_handler.php
<?php
if(isset($_GET['opening_case'])) {
$result = [
"funds" => true,
];
$ResultsInJSON= json_encode($result);
echo $ResultsInJSON;
}
?>
当使用AJAX点击按钮时,index.php将发送请求,您可以在这里阅读https://api.jquery.com/jquery.get/,然后您的PHP将接收带有JSON代码的请求和响应,该代码可以使用data.whatever处理,如上面的示例所示。
注意:我不是PHP专家,但我相信这将是在这种情况下使用的更好的方法。
Note2:您不需要Jquery for Ajax,但它更简单!下面是在没有Jquery https://www.w3schools.com/xml/ajax_xmlhttprequest_send.asp的情况下如何做到这一点。
https://stackoverflow.com/questions/52691467
复制相似问题