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

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

Вот мой джаваскрипт

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

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

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

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


javascript php jquery ajax reload
person novellino    schedule 20.10.2011    source источник
comment
Код выглядит нормально для меня. Если ваша функция ajaxFunction() вызывает .ajax(), перезагрузки страницы быть не должно. На какие элементы HTML в вашем списке вы нажимаете?   -  person Jan-Henk    schedule 20.10.2011
comment
что вы пробовали - предоставьте здесь фрагмент кода, что содержит ваша функция ajaxFunction().   -  person Punit    schedule 20.10.2011
comment
покажите нам полный код JS (особенно событие, к которому вы привязаны)   -  person matino    schedule 20.10.2011
comment
С ajaxFunction все в порядке, потому что я использую его и для других частей, поэтому я не думаю, что проблема в этом? Элементы HTML — это ‹li›, и я называю это ajax в onClick.   -  person novellino    schedule 20.10.2011

Ответы (4)


arrow_upward
1
arrow_downward

Попробуй это

$(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]...');
        }
    });

});

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

person Vikas Naranje    schedule 20.10.2011
comment
это то, что я делаю в ajaxFunction() на самом деле. - person novellino; 20.10.2011
comment
@novellino Я знаю, но вы обратили внимание на return false; это остановит перенаправление вашей страницы, в основном предотвратив событие по умолчанию. - person Vikas Naranje; 20.10.2011
comment
хорошо, спасибо за ответ. Я добавляю также возврат false, но не работает. Я просто понимаю, что пока ошибка не в вызове ajax, у меня может быть что-то не так в div, в котором я пытаюсь добавить результат. Большое спасибо. - person novellino; 20.10.2011

arrow_upward
1
arrow_downward

Попробуйте использовать load, чтобы загрузить div с содержимым URL -

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

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

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

person Jayendra    schedule 20.10.2011

arrow_upward
0
arrow_downward

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

в вашем javascript:

//add the query here
parameters = "category_id="+categoryId + "&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
}
person jackJoe    schedule 20.10.2011
comment
@novellino Возможно, я неправильно понял ваш вопрос, кажется, вся страница перезагружается, и я думал, вы имели в виду, что получаете целую страницу из php, извините. Если вы действительно хотите вывести только содержимое div, то в предложении if/then внешнего php поместите что-то вроде echo "<div>content</div> - person jackJoe; 20.10.2011
comment
Ах хорошо. Я попробую это. Хотя я понимаю, что, возможно, моя проблема в div, я пытаюсь добавить результат вызова ajax, а не сам вызов ajax. Спасибо - person novellino; 20.10.2011

arrow_upward
0
arrow_downward

Вся страница перезагружается, что означает, что в вашем коде 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....

person Vishal Barot    schedule 20.10.2011