Пожалуйста, несите меня, потому что я студент. Мой инструктор заставил нас смотреть 5 видеороликов YouTube, и теперь мы планируем использовать JQuery вместо стандартного JavaScript. Все, что я хочу сделать, это обмен файлом с элементом из другого файла.
Вот мой HTML-код:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Testing JQuery</title>
<script src="/jquery-1.7.2.min.js"></script>
</head>
<body>
<h1 id="header">Testing JQuery</h1>
<p id ="dummy">Lorem Ipsum </p>
<script src="/changes.js"></script>
<form name="input" action="/changes.js">
<input type="button" value="Change the Header">
</form>
</body>
</html>
Вот мой код JavaScript/JQuery:
$(document).ready(function() {
$('input').click(function() {
var url = $(this).attr('form');
$('#header').load( greeting.html + '#ajax h1');
return false;
});
});
Третий файл называется greeting.html, и это все, что он содержит:
<h1 id="ajax">Hello from jQuery with AJAX</h1>
$('#header').load( 'greeting.html #ajax' );
Это все, что вам нужно. Избавьтесь от всего остального. Вам не нужно объявлять url
и вам не нужно возвращать false.
Чтобы заменить элемент, load()
не будет работать, поскольку он загружает новый H1 внутри старого H1, он его не заменяет, поэтому вам нужно использовать $.get
и сделать это самостоятельно:
$(document).ready(function() {
$('input').on('click', function() {
$.get({
url : 'greeting.html'
}).done(function(data) {
var h1 = $('<div />').append(data).find('h1#ajax');
$('#header').replaceWith(h1);
});
return false;
});
});