Question

这是我第一次使用AJAX，我正在创建一个鼓循环生成器，而不是必须刷新页面来创建一个新的循环我想尝试AJAX。

单击＃button1时会运行generate.php，我试图从generate.php echo返回多个值，并将它们放在页面上的不同元素中。

不同的值是要放在音频src中的文件URL，背景图像url，循环的条形数以及循环的BPM。它们在php echo中用逗号分隔。

我在谷歌开发者工具中出现错误，当我点击按钮时，“jquery-1.7.1.min.js：4 GET https://whatever.com/random/undefined 404（Not Found）”

按钮：

<div id="button1"><div class="namething">Generate</div></div>

Jquery的

<script>
$('#button1').click(function(){
    $.ajax({
        type:'post',
        url:'generate.php',
        data: $(this).val(),                 
        success: function(value){
             var data = value.split(",");
            $('#fileurl').val(data[0]);
            $('body').css('background-image', 'url(' + data[1] + ')');
            $('#bars').val(data[2]);
            $('#bpm').val(data[3]);
        }
    }); 
  });
</script>

generate.php （它在此之前预先生成函数，但这是我需要返回到jquery和页面其余部分的唯一数据）

echo $fileurl,$imageurl,$bars,$randbpm;

我不确定，但我认为它与jQuery中的'data：'有关，我只需要找出如何返回echo数据

当我点击按钮时，它正在工作并创建一个新的循环它只是没有正确返回回声数据所以我知道生成的路径是正确的.php

编辑:(解决方案）

感谢@Thamilan的帮助！我不得不对jquery进行一些小改动来更新它现在正在按需工作的音频播放器：

Jquery的

<script>
$('#button1').click(function(){
    $.ajax({
    type:'post',
    url:'generate.php',
    data: $(this).val(),
    dataType: 'json',
    success: function(data){
        var fileName = data[0];
        $("#music").attr("src",fileName).trigger("play");
        $('#timeline').css('background-image', 'url(' + data[1] + ')');
        $('#bars').text(data[2]);
        $('#bpm').text(data[3]);
    }
}); 
  });
</script>

PHP：

$returnArr = [$fileurl,$imageurl,$bars,$randbpm];    
echo json_encode($returnArr);

Answer 1

在$.ajax({ type:'post', url:'generate.php', data: $(this).val(), dataType: 'json', //Added this success: function(data){ //value to data $('#fileurl').val(data[0]); $('body').css('background-image', 'url(' + data[1] + ')'); $('#bars').val(data[2]); $('#bpm').val(data[3]); } });中将这些添加到数组并编码为JSON并发送。在AJAX中获取JSON，打印出来。

使您的AJAX类似于：

$returnArr = [$fileurl,$imageurl,$bars,$randbpm];    
echo json_encode($returnArr);

<强> generate.php

list l(3);

返回多个值ajax和php

1 个答案: