Question

我最近一直在探索在项目中第一次使用PHP的可能性，但现在我偶然发现了一个我似乎无法解决的问题 - 甚至在Stack Overflow上查看各种问题之后。

基本上我有一个数组，我希望随机化值，并通过点击链接更新这些值，而无需重新加载整个页面。

data.php

<?php
$var = array(  
array("Hello", "0wLljngvrpw", "10", "15"),   
array("Hey", "TINASKjjNfw", "20", "25"),  
array("Hi", "rzU_fLcxIN0", "30", "35"),
);  
// array_rand returns the INDEX to the randomly 
// chosen value, use that to access the array. 
$finalVar = $var[array_rand($var)];  
?>

我试图借用Ajax button click that triggers a php file / link中的一个例子，但我还没有让它发挥作用。

的index.php

<html>
<body>

<!-- Works, but reloads entire page -->
<?php include('data.php'); ?>
<form>
    <input type="submit" action="data.php" method=post value="Randomize">
</form>
<hr>
<?php echo $finalVar[0];?>
<br>
<?php echo $finalVar[1];?>
<br>
<?php echo $finalVar[2];?>


<!-- Borrowed code, can't seem to get it working though -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
function doSomething() {
    $.get("data.php");
    return false;
}
</script>

<a href="#" onclick="doSomething();">Randomize without reload</a>


</body>
</html>

我尝试过使用前面提到的问题的例子而没有运气，我得到的只是/？＃在url的末尾（这似乎也打破了第一个工作提交动作？）并没有改变随机字符串。我对此非常陌生，所以我很抱歉，如果这不是一个真正有效的问题，但感觉必须有一些非常基本的东西，我在这里搞砸或误解了，没有？

Answer 1

对于这个$.get("data.php");工作，你的data.php必须在输出流中输出一些内容，例如json，echo $finalVar[0];，并通过这个$.get("data.php");你做ajax get请求，更好地打开你的firebug或者Chrome中的开发工具，并查看带有网络请求的选项卡

Answer 2

尝试这样的事情。让data.php返回HTML。

<强> data.php

<?php
$var = array(  
array("Hello", "0wLljngvrpw", "10", "15"),   
array("Hey", "TINASKjjNfw", "20", "25"),  
array("Hi", "rzU_fLcxIN0", "30", "35"),
);  
// array_rand returns the INDEX to the randomly 
// chosen value, use that to access the array. 
$finalVar = $var[array_rand($var)]; 
?> 

<?php echo $finalVar[0];?>
<br>
<?php echo $finalVar[1];?>
<br>
<?php echo $finalVar[2];?>

然后将其插入到您的文档中，您可以使用jQuery $.get()调用它。

<强>的index.php

<html>
<body>

<hr>
<div id="randvalues">
<?php include('data.php'); ?>
</div>
<a href="#" onclick="doSomething();">Randomize without reload</a>

<!-- Borrowed code, can't seem to get it working though -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
    function doSomething() {
        $.get("data.php", function(data) {
            $("#randvalues").html(data);
        });
    }
</script>

</body>
</html>

Answer 3

将您的代码更改为此

data.php

<?php
$var = array(  
array("Hello", "0wLljngvrpw", "10", "15"),   
array("Hey", "TINASKjjNfw", "20", "25"),  
array("Hi", "rzU_fLcxIN0", "30", "35"),
);  
// array_rand returns the INDEX to the randomly 
// chosen value, use that to access the array. 
 $finalVar = $var[array_rand($var)];
 echo json_encode($finalVar);  
?>

的index.php

<html>
<body>

<!-- Works, but reloads entire page -->
<?php include('data.php'); ?>
<form>
    <input type=submit action="data.php" method=post value="Randomize">
</form>
<div class='vars'>
    <hr>
        <?php echo $finalVar[0];?>
    <br>
        <?php echo $finalVar[1];?>
    <br>
        <?php echo $finalVar[2];?>
</div>


<!-- Borrowed code, can't seem to get it working though -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
function doSomething() {
    $.get("data.php", function(data){
        data = JSON.parse(data);
        console.log(data);
        string = "<hr />";
        string += data[0];
        string += "<br />";
        string += data[1];
        string += "<br />";
        string += data[2];
        $('.vars').html(string);
    });
    return false;
}
</script>

<a href="#" onclick="doSomething();">Randomize without reload</a>


</body>
</html>

Answer 4

你在这里要做的是用jquery调用（获取或发布）调用你的data.php，并通过ajax机制获取你的更新内容（在这种情况下，你的数组中的随机元素）。

这样，您的文件将如下所示：

<强> data.php

$var = array(  
    array("Hello", "0wLljngvrpw", "10", "15"),   
    array("Hey", "TINASKjjNfw", "20", "25"),  
    array("Hi", "rzU_fLcxIN0", "30", "35"),
);  

$finalVar = $var[array_rand($var)];  

echo $finalVar[0] . '<br/> ' . $finalVar[1] . '<br/>' . $finalVar[2];

<强>的index.php

<html>
<body>

<button class="randomizerButton" data-href="data.php">Randomize</button>
<hr>
<div id="results">
<?php include('data.php'); ?>

</div>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $('button.randomizerButton').click(function(){
            scriptUrl = $(this).attr('data-href');
            $.post(scriptUrl, function(response){
                $('#results').html(response);
            });
        });
    });
</script>

</body>
</html>

说明：$(document).ready(function(){..表示您将在此处定义jQuery内容。 $('button.randomizerButton').click(function(){...表示当你点击一个按钮元素时，你想要发生一些事情，它上面有一个类“randomizerButton”。我已将您的data.php链接编码到其data-href属性中的button元素中，我们使用$(this).attr('data-href');检索该值并将其值放入变量（scriptUrl）中。在那之后，我们对脚本文件（在我们的例子中是data.php）进行AjaxPost调用，并且用function(response)我们说，“让我们回过头来做些什么，然后调用那个东西响应”。 $('#results').html(response);因为我们添加了一个id为“results”的div而发生了神奇的事情 - 我们告诉这条线，将这些响应内容放入我们的结果容器div中。

**更新

您可以在data.php：

中将数据输出转换为表单链接，如下所示

....
echo $finalVar[0] . '<br/> ' . $finalVar[1] . '<br/>' . $finalVar[2];
echo '<a href="http://www.youtube.com/v/' . $finalVar[1] . '">Youtube link</a>';
....

来自数组的PHP随机值，无需重新加载页面

4 个答案:

data.php

的index.php