Question

我对这一切都很陌生，所以我为任何明显的错误道歉。

我尝试使用Javascript的ajax调用从数据库中选择一个随机电影，创建一些包含电影信息的html，然后将信息数组发送回变量。我使用多个php echo语句来执行此操作。当然问题是echo语句相互粘贴，因此JSON无法解析它。

Ajax电话：

var getOutput = function() {
    var movies = [];
    $.ajax({
        url:'on_movie_click.php',
        success: function (response) {
            $('#selection_area').html(response.responseText);
            console.log(response); #troubleshooting
            movies = JSON.parse(response);
        },
        error: function () {
            $('#selection_area').html('There was an error!');
        }
    });
    return movies;
}

php代码：

//Getting info from database above
$index = [$movie_a,$movie_b];
echo json_encode($index);
echo "<div id='movie_a'><div id='movie_a_title'>$movie_a[1] </div><div id='movie_a_year'>($movie_a[2])</div></div>";
echo "<div id='movie_b'><div id='movie_b_title'>$movie_b[1] </div><div id='movie_b_year'>($movie_b[2])</div></div>";

ajax调用中的console.log正确输出存储的数组$ index，但它也添加了两个<div...语句。因此，JSON.parse会抛出错误。

有没有办法将变量（$ index）存储回javascript变量（var movies），还有另外两个echo语句使用相同的ajax调用更新网页？

编辑：感谢kuma DK工作。

Answer 1

发送json编码信息时，您无法使用文本（HTML）将其加入。如果你想发送HTML或任何其他字符串，它也必须用json包装。它将创建一个有效的Json字符串，你仍然可以从客户端的Json结果中引用它来获取HTML字符串。

尝试这样的事情

//Getting info from database above
$index[] = array("data"=>$movie_a,"html"=>"<your html codes here>.........</end html>");
$index[] = array("data"=>$movie_b,"html"=>"<your html codes here>.........</end html>");
echo json_encode($index);

Answer 2

您不需要使用带有html标记的回声来更改页面。只需通过javascript使用dom操作：

//first a function to create the movie div
//for the div id's you hand over the array index
function newMovieDiv(movie, index){
      //define the outer div
      var movieDiv = $("<div>").attr('id', 'movie' + index),
        //define the title div
        movieTitle = $("<div>").attr('id', 'movie' + index + 'title').text(movie[0]),
        //define the year div
        movieYear = $("<div>").attr('id', 'movie' + index + 'year').text("(" + movie[1] + ")");
      //put it all together and return it
      return movieDiv.append(movieTitle, movieYear);
 }

然后你拍摄电影阵列并循环播放它。使用当前项及其索引调用函数，并将返回值保存在变量movieItem中。然后将其附加到您要插入的任何元素。

movies.forEach(function(item) {
  var movieItem = newMovieDiv(item, movies.indexOf(item)); 
  $("#movieList").append(movieItem);
});

http://jsfiddle.net/acL0dq4y/

当然，你必须适应你的电影json。但是这样，你只能根据请求从你的服务器发送电影json，而不需要在每次php调用时发送标记信息

使用Json将数据和HTML从php传递到javascript

2 个答案: