2014-01-07 2 views
3

Мой сайт состоит из двух страниц. Я пытаюсь загрузить страницу в div на первой странице, а затем отобразить страницу 2 onclick. Я пытаюсь использовать следующий код, который не работает. Я новичок, так что извиняюсь, если это просто тупой вопрос.Как использовать ajax для загрузки новой страницы в div

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
    $.ajax({url:"myPage2.html",success:function(result){ 
     $("#div1").html(result); 
    }}); 
    }); 
}); 
</script> 
</head> 
<body> 

<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div> 
<button>Get External Content</button> 

</body> 
</html> 
+0

Действительно ли URL вашей второй страницы '# myPage2.html' – tymeJV

+0

Этого не может быть, так как' # 'используется для разделения URL-адреса страницы с привязки на странице для прокрутки. – Barmar

+0

попробуйте jsFiddler.net это хорошо, когда у вас есть такой вопрос, вы можете загрузить его там и отправить нам ссылку. Таким образом, люди могут редактировать его и работать с ним. – Ljubisa

ответ

2

Ваша проблема не ваш код. Как вы можете видеть в this Plnkr, он работает без проблем.

Функция .load() может упростить ваш текущий код, но это не решит вашу настоящую проблему, так как это просто синтаксический сахар.

По какой-то причине ваш браузер не находит myPage2.html и поэтому не может отобразить его правильно.

+0

Awesome. Я пытался выяснить, как использовать Plunker. Вы попали туда первым. Хммм. Я пытаюсь понять, почему я не могу найти myPage2. СПАСИБО! – hypermiler

+0

Попробуйте использовать консольное окно своего браузера, оно покажет вам, где-то ошибка где-то :). – Aidiakapi

3

У вас есть символ # в адресе загрузки.

Кроме того, почему бы вам не использовать:

$("#div1").load("myPage2.html"); 
+2

Я думаю, что это действительно дешево, чтобы отредактировать свой ответ, чтобы скрыть чужое решение. – Aidiakapi

+2

На самом деле я не видел другого ответа, пока не закончил редактирование – Qiang

+0

Да. У меня изначально не было «#», ничего не делалось. Когда я вставил «#», он удалил страницу, но не отобразил страницу2. Я читал, что вы не можете использовать ajax для загрузки из внешнего домена. Не уверен, как ввести page2 url ..... – hypermiler

3

Ваш код должен работать, как только # удаляется из URL. Вот немного более лаконична версия:

$("button").click(function(){ 
    $("#div1").load("myPage2.html"); 
}); 

см jQuery.load()

+0

У меня изначально не было #. Ничего не делал. Когда я помещаю «#» перед адресом, он скрывает страницу1. – hypermiler

1

# символ в # myPage2.html является потенциально причиной ошибки.

Кроме того, если вы хотите, вы также можете сделать:

$('button').click(function() { 

    $('#div1').load('myPage2.html'); 

}); 
Смежные вопросы