Javascript 不重新加载页面的数组中的PHP随机值_Javascript_Php_Jquery_Html_Ajax

Javascript 不重新加载页面的数组中的PHP随机值

javascript php jquery html ajax

Javascript 不重新加载页面的数组中的PHP随机值,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,最近，我第一次在一个项目中探索使用PHP的可能性，但现在我偶然发现了一个我似乎无法完全理解的问题——即使在这里查看了有关堆栈溢出的各种问题之后基本上，我有一个数组，我想从中随机化值，并通过点击链接更新这些值，而无需重新加载整个页面 data.php <?php $var = array( array("Hello", "0wLljngvrpw", "10", "15"), array("Hey", "TINASKjjNfw", "20", "25"), array("Hi"

最近，我第一次在一个项目中探索使用PHP的可能性，但现在我偶然发现了一个我似乎无法完全理解的问题——即使在这里查看了有关堆栈溢出的各种问题之后

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

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)];  
?>

<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>

<?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];?>

<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>

$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];

<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>

我试着从他那里借用一个例子，但我还没有成功

index.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)];  
?>

<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>

<?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];?>

<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>

$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];

<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>







函数doSomething（）{
$.get（“data.php”）；
返回false；
}

我尝试过使用前面提到的问题中的示例，但运气不好，我得到的只是url末尾的/？#（这似乎也破坏了第一个工作提交操作？），并且随机字符串中没有任何更改。我对这一点很陌生，所以如果这不是一个真正有效的问题，我很抱歉，但我觉得这里一定有一些非常基本的东西我弄错了或误解了，不是吗？

对于这个

$.get（“data.php”）

working your data.php必须在输出流中输出某些内容，例如json，

echo$finalVar[0]

并通过这个

$.get（“data.php”）如果您正在执行ajax get request，最好在chrome中打开firebug或开发工具，并查看“为您的请求建立网络”选项卡，尝试类似的方法。让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)];  
?>

<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>

<?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];?>

<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>

$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];

<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>

将您的代码更改为此
data.php


index.php






函数doSomething（）{
$.get（“data.php”，函数（数据）{
data=JSON.parse（数据）；
控制台日志（数据）；
string=“”；
字符串+=数据[0]；
字符串+=“
”；
字符串+=数据[1]；
字符串+=“
”；
字符串+=数据[2]；
$（'.vars'）.html（字符串）；
});
返回false；
}
您在这里要做的是通过jquery调用（get或post）调用data.php，并通过ajax机制获取更新的内容（在本例中，是数组中的随机元素）
这样，您的文件将如下所示：
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)];  
?>

<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>

<?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];?>

<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>

$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];

<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>

我无法帮助您使用href
，但此
缺少引号。所以做
，它会起作用的。@fred ii感谢您注意到这一点。谢谢，这似乎在正确的方向上帮助了我-有没有任何方法可以轻松地单独或可能在URL中输出随机内容？（例如，前面我使用了http://www.youtube.com/v/)
由于include
语句，您可以在data.php文件中创建的任何HTML都将首先）转储到index.php中，然后在单击按钮时由$.get（）
调用加载。您可以创建URL、下拉列表，无论您需要什么。