Использовать Ajax и JavaScript для создания динамических ссылок из результатов
HTML содержит два элемента div, которые делают разные вызовы ajax для обоих элементов div, где div1 - результат HTML-формы, а div2 - результат нажатия кнопки мыши на 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"> </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), и отобразить результат во втором теге div с именем "right_panel", используя только ajax и javascript, а не jquery.