Question

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>

我有一个使用ajax获取结果的movies.js文件

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);
}

此代码显示电影的标题和发布日期（按钮上的onclick结果）

问：我想让电影标题成为可以像www.imdb.com/(movie_title）一样调用的超链接，并将结果显示在名为＆＃34; right_panel＆＃34;的第二个div标签中。仅使用ajax和javascript而不使用jquery。

使用Ajax和JavaScript从结果中创建动态链接

0 个答案: