1

HTML 包含两个 div 对两个 div 进行不同的 ajax 调用，其中 div1 是 html 表单的结果，而 div2 应该是 onclick on div1 的结果

html

<html lang="en">
  <head>
    <title>Display Movie Information</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="movies.js"></script>
  </head>
  <body onload="initialize();">
  <tr><td>
    <form>
       <label>Movie title: <input type="text" id="form-input"/></label>
       <input type="button" onclick="sendRequest();" value="Display Info"/>
    </form>
    <div id="output">&nbsp;</div></td>
    <td><div id="right_panel">Display Dynamic results here</div></td>
  </body>
</html>

我有一个 movies.js 文件，它使用 ajax 得到结果

function initialize () {
}

function sendRequest () {
var xhr = new XMLHttpRequest();
var query = encodeURI(document.getElementById("form-input").value);
xhr.open("GET", "proxy.php?method=/3/search/movie&query=" + query);
xhr.setRequestHeader("Accept","application/json");
xhr.onreadystatechange = function () {
   if (this.readyState == 4) {
      var json = JSON.parse(this.responseText);
      var str = JSON.stringify(json,undefined,2);

      //customized code
      console.log(json.results.length);
      var i=0;
      var movie_title,release_date;
      var movies = new Array();
      while(i<json.results.length)
      {
        movie_title = json.results[i].title;
        release_date = json.results[i].release_date;

        movies[i] = "<li>"+movie_title+"<br/>"+release_date+"<br/></li>";
        i++;
      }       

      document.getElementById("output").innerHTML = "<ul>" + movies + "    </ul>";
       }
   };
   var movie_detail = new XMLHttpRequest();
   var movie_credit = new XMLHttpRequest();
   xhr.send(null);
}

此代码显示电影的标题和发行日期（单击按钮的结果）

问：我想让电影标题成为一个超链接，可以像 www.imdb.com/(movie_title) 一样进行调用，并将结果显示在名为“right_panel”的第二个 div 标记中，仅使用 ajax 和 javascript 而没有 jquery。

4

0 回答 0