Передача переменной в jQuery AJAX

Question

Я застрял в колее. Я надеюсь, что кто-то может помочь.

По сути, я создаю мобильное веб-приложение AJAX с помощью jQuery. Я могу нормально анализировать определенный файл XML, но я хочу иметь возможность анализировать другие файлы XML на основе ссылки, по которой они были нажаты, и загружать их на лету в тот же DIV или UL.

Итак:

нажмите на ссылку 1, загрузите XML1
нажмите на Link2, загружает XML2

Я хотел бы иметь возможность делать все это на стороне клиента, поэтому нет PHP (или это плохая идея?). Вот код jquery, который я использовал:

$(document).ready(function() {          

        $("a.load_ajax").click(loadAjax());

        function loadAjax() {
            var fileID = get('?lineID=');

            var dataID = "xml/" + fileID + ".xml"

            $.ajax({
                type: "GET",
                url: dataID,
                dataType: "xml",
                success: parseXml
            });

            function parseXml(xml) {
                $(xml).find("train").each(function() {
                    $("ul#ajax-output").append('<li>' + $(this).find("time").text() + '</li>');
                });
            }
        }           

});

Это просто не работает вообще. Я передавал переменную, используя GET в URL. Поэтому ссылка в HTML-файле идет на /? LineID = SBD_to_Union, и она должна загрузить XML-файл с именем SBD_to_Union.xml

Имеет смысл для кого-нибудь? Буду признателен за помощь.

Answer 1

На первый взгляд, я думаю, что ваш синтаксис ajax () немного отключен.

Используете ли вы строки запроса по определенной причине? Если нет, я бы попробовал дать HTML-ссылкам абсолютный URL-адрес XML-файла, который вы пытаетесь получить:

<a href="xml/file123.xml"></a>

Тогда попробуйте это:

$("a.load_ajax").click(function(e) {
 e.preventDefault();
 var url = $(this).attr('href');

            $.ajax({
                type: 'GET',
                url: url,
                dataType: 'xml',
                success: function(response) {
                    $(response).find('train').each(function() {
                        $('ul#ajax-output').append('<li>' + $(this).find('time').text() + '</li>');
                }
            });

        });

Я не проверял это, но он должен делать то, что вы хотите.

Answer 2

Вы проверяли, возвращает ли функция get правильные данные?

добавить alert(fileID); сразу после строки get(..);.

Но почему бы вам не создать URL-адреса, указывающие непосредственно на XML-файлы, а не анализировать и создавать URL-адреса на лету?

просто сделайте ссылку в html, чтобы она указала на xml/SBD_to_Union.xml

Answer 3

То, с чем вы, похоже, боретесь, это получение строки из URL в якоре. Используйте $ (this), чтобы получить атрибут href по нажатой ссылке. Затем вы можете использовать регулярное выражение, если URL-адрес соответствует описанию, чтобы удалить все, кроме идентификатора строки, который будет использоваться при создании ссылки для XML. Я предполагаю, что XML является серверной стороной и относительно текущего URL. Если нет, то вам нужно скорректировать путь. Я позволил себе немного сжать вещи, поместив функции в строку. Редактировать : и обработчик кликов должен возвращать значение false, чтобы ссылка не выполняла действие по умолчанию.

$(function() {          

    $("a.load_ajax").click( function() {
        var fileID = $(this).attr('href').replace(/.*?lineID=/,'');

        var dataID = "xml/" + fileID + ".xml"

        $.ajax({
            type: "GET",
            url: dataID,
            dataType: "xml",
            success:  function(xml) {
                $(xml).find("train").each(function() {
                    $("ul#ajax-output").append('<li>' + $(this).find("time").text() + '</li>');
                });
            }
        });
        return false;
    });          
});

Answer 4

<a href="#" id="link1" class="load_ajax">Link1</a>
<a href="#" id="link2" class="load_ajax">Link2</a>

Вы можете делать вещи в зависимости от идентификатора href (или другого его атрибута или его значения href).

$(function() {
    $("a.load_ajax").click(loadAjax); 
});

function loadAjax()
{
  if ($(this).attr("id") == "link1")
  {
    alert("link1"); //load xml1
  }
  else
  {
    alert("link2"); //load xml2
  };
}