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

我对这一切都不熟悉，所以我为任何明显的错误道歉

我试图使用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，但它也有两个当发送json编码的信息时，您不能将其与textHTML连接起来。如果要发送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);

---

您不需要使用带有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);
 }

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

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