Блог

Главная - Вопросы по программированию - Как я могу добавить содержимое страницы в div с помощью Ajax?

Как я могу добавить содержимое страницы в div с помощью Ajax?

#php #javascript #jquery #ajax #reload

#php #javascript #jquery #ajax #перезагрузка

Вопрос:

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

Вот мой javascript

   parameters = "category_id=" categoryId;
  var result = ajaxFunction("changeCategory.php", parameters);
  $("#mydiv").html(result);

Функция ajaxFunction() — это обычная функция jQuery $.ajax() с «POST». В «changeCategory.php «Я вызываю с помощью include другого php-файла.
Проблема в том, что перезагружается вся страница, а не только div. Я хочу использовать эту имеющуюся у меня функцию ajax, потому что я хочу отправить данные в свой php-файл.

Кто-нибудь знает, что я должен сделать, чтобы перезагрузить только div?

Заранее спасибо

Комментарии:

1. Код выглядит нормально для меня. Если ваша ajaxFunction() вызывает .ajax(), то перезагрузки страницы быть не должно. На какие HTML-элементы в вашем списке вы нажимаете?

2. что вы пробовали — предоставьте здесь фрагмент кода, который содержит ваша функция ajaxFunction() .

3. покажите нам полный код JS (особенно событие, к которому вы привязываетесь)

4. Функция ajax в порядке, потому что я использую ее и для других частей, поэтому я не думаю, что проблема в этом? Элементами HTML являются <li>, и я вызываю этот ajax в «onClick» .

Ответ №1:

Попробуйте это

 $(document).ready(function(){
    var parameters = {category_id:categoryId};
    $.ajax({
        url:'changeCategory.php',
        type:'post',
        data:parameters,
        dataType:'html',
        success:function(result){
            $("#mydiv").html(result);
        },
        error:function(){
            alert('Error in loading [itemid]...');
        }
    });

});

Также убедитесь, что когда в вашем событии click эта строка записана или нет return false; , это обязательно.

Комментарии:

1. на самом деле это то, что я делаю в ajaxFunction() .

2. @novellino Я знаю, но вы обратили внимание на return false; это останавливает перенаправление вашей страницы, в основном предотвращая событие по умолчанию.

3. хорошо, спасибо за ответ. Я добавляю также возвращаемое значение false, но не работает. Я просто понимаю, что пока ошибка не в вызове ajax, у меня может быть что-то не так в div, который я пытаюсь добавить результат. Большое спасибо.

Ответ №2:

Попробуйте использовать load для загрузки div с содержимым url — 

 $("#mydiv").load("changeCategory.php", {category_id: "category_id_value"} );

Вы можете передавать данные в URL.

Метод POST используется, если данные предоставляются как объект; в противном случае предполагается GET .

Ответ №3:

вы можете отправить запрос на этот PHP, чтобы он «понимал», что ему нужно выводить только div, например:

в вашем javascript:

 //add the query here
parameters = "category_id=" categoryId   "amp;type=divonly";
var result = ajaxFunction("changeCategory.php", parameters);
$("#mydiv").html(result);

в вашем «changeCategory.php «:

 //add a query check:
$type = "";
if (isset($_POST['type'])) {
    $type = $_POST['type'];
}

//then, depending on the type, output only the div:
if($type === "divonly"){
   //output the div only;
} else {
   //your normal page
}

Комментарии:

1. @novellino Возможно, я неправильно понял ваш вопрос, кажется, что вся страница перезагружается, и я подумал, что вы имели в виду, что получаете «целую» страницу из php, извините. Если вы действительно хотите вывести только содержимое div, то в предложении if / then внешнего php поместите что-то вроде echo "<div>content</div>

2. ах, хорошо. Я попробую это. Хотя я понимаю, что, возможно, моя проблема в div, я пытаюсь добавить результат вызова ajax, а не сам вызов ajax. Спасибо

Ответ №4:

 $(document).ready(function() {
    $.ajax({
        url: "right.php",
        type: "POST",
        data: {},
        cache: false,
        success: function (response) {

            $('#right_description').html(response);
        }
    });

});

Ответ №5:

Перезагружается вся страница, что означает, что в вашем коде javascript может быть ошибка

проверьте это еще раз или попробуйте это

 function name_of_your_function(id)
{   

var html =  $.ajax({
   type: "GET",
   url: "ajax_main_sectors.php",
   data: "sec=" id,
   async: false
  }).responseText;


    document.getElementById("your div id").innerHTML=html;
}

вы можете использовать метод get или метод post….