почему это не работает ?? JQuery AJAX заменить содержимое в конкретном DIV

Question

Ниже у меня есть код на моем сайте, но когда я нажимаю на ссылке в данном конкретном div, он просто открывает новое окно, почему это ??

$(function(){   
//bind a click event to the nav links
$("#links a").bind("click", function(e){ 

    //keep the links from going to another page by preventing their default behavior
    e.preventDefault();

    //this = link; grab the url
    var pageLocation = this.href;

    //fire off an ajax request
    $.ajax({ 
        url: pageLocation, 

        //on success, set the html to the responsetext
        success: function(data){ 
            $("#biocontent").html(data.responseText); 
        } 
    });
});
});

EDIT:

Я до сих пор не понял, но вот где я, мой сценарий выглядит следующим образом

  <script type="text/javascript">(function(){   
//bind a click event to the nav links
$("#links a").bind("click", function(e){ 

    //keep the links from going to another page by preventing their default behavior
    e.preventDefault();

    //this = link; grab the url
    var pageLocation = $(this).attr("href")

    //fire off an ajax request
   $.ajax({ 
    url: pageLocation, 

    //on success, set the html to the responsetext
    success: function(data){ 
        $("#biocontent").html(data); 
    },
    dataType : "html"
     });
});

});

и вот как я использую его в моем HTML <div id="links"> <a href="testvid.html"><img src="img/thumbs/img3.jpg" /></a>

но по-прежнему нет, пожалуйста, дайте мне знать, что вы думаете.

EDIT

Итак, я взял минимальные части этого кода и переместил его в новый документ, и теперь он вообще не работает, но я чувствую, что у меня возникла проблема с Jquery, так что теперь это работа, и я получаю эта ошибка в

17XMLHttpRequest не может загрузить файл: ///Users/semaj4712/Desktop/WME%20Website/testvid.html. Нулевой источник не разрешен Access-Control-Allow-Origin.

Что я понятия не имею, что это значит, поэтому, как только я его здесь заработаю, мне придется решать проблему с Jquery на реальном сайте.

Answer 1

Вы должны вызвать ajax с указанным типом, который вы хотите получить.

 $.ajax({ 
        url: pageLocation, 

        //on success, set the html to the responsetext
        success: function(data){ 
            $("#biocontent").html(data); 
        },
        dataType : "html"
    });

Answer 2

Я предлагаю вместо этого использовать функцию jQuery load:

$(document).ready(function(){

    $("#links a").bind("click", function(e){

        e.preventDefault();

        var pageLocation = $(this).attr('href');

        $("#biocontent").load(pageLocation,function(){
            alert('Loaded!');
        }); 
    });
});

Это самый простой и эффективный способ извлечения данных, и, основываясь на вашем коде, я предполагаю, что это только HTML.

Кроме того, в вашем последнем редакторе вы пропускаете точку с запятой при определении pageLocation.

Надеюсь, это поможет!

Answer 3

Итак, я смог разобраться, это было связано с использованием chrome и доступом к файлам на моем диске c, при использовании safari это работало, теперь у меня просто проблема с конфликтующим jquery, но я проведу некоторые исследования по этому вопросу. спасибо за помощь, ребята.

Answer 4

На основании ваших обновлений вы пробовали $ ("# biocontent"). Load (pageLocation)? Кажется, это соответствует тому, что вы пытаетесь сделать.

$(function(){   
    //bind a click event to the nav links
    $("#links a").bind("click", function(e){ 
        //keep the links from going to another page by preventing their default behavior
        e.preventDefault();

        //this = link; grab the url
        var pageLocation = this.href;
        $("#biocontent").load(pageLocation);

    });
});

http://api.jquery.com/load/

Answer 5

При успешном обратном вызове ваш объект данных должен быть объектом JSON , чтобы он содержал responseText, поэтому вам необходимо установить для поля dataType в вызове ajax значение 'json'.В вашей текущей ситуации похоже, что вы получаете html назад.Обратитесь к документации ajax на jquery.com для получения дополнительной информации.

Попробуйте использовать javascript console in chrome или firebug in firefox чтобы увидеть любые ошибки.Вы, вероятно, найдете его на странице загрузки

Редактировать: Вы работаете в своей файловой системе!Вы не можете совершать ajax-вызовы через файловую систему из-за той же политики происхождения, которая применяется браузерами.Это означает, что вы не можете делать запросы AJAX на другие серверы.Вам нужно будет разместить свои HTML-страницы в том же домене, чтобы выполнить запрос.То, что вы делаете, это как запрос данных с www.google.com, когда ваш домен www.mydomain.com.Вы можете запрашивать данные только с www.mydomain.com.Лучшее, что вы можете сделать, это настроить сервер Apache на вашем компьютере.