Как заставить AJAX работать из разных каталогов?

Question

Сначала позвольте мне показать вам структуру папок:

public_html[]  
     |_ project_folder[]  
            |_another_folder[]  

            |_xml_folder[]  
                   |_xmlfile.xml   

            |_ js_folder[]  
                   |_javascriptfile.js  

            |_ file.html  
            |_ file2.html

У меня есть несколько файлов file.html и file2.html, которые используют jQuery ajax при загрузке документа. Ajax использует этот код:

$(document).ready(function()
{
    $.ajax({
        type: "GET",
        url: "xml/xmlfile.xml",
        dataType: "xml",
            ...
            ...
            ...
}

Это прекрасно работает, когда файлы HTML находятся в корневом каталоге файлов (так, как они есть сейчас)

Теперь, когда я перемещаю html-файл в папку (например, перемещаем file2.html в another_folder), загрузка xml-файла больше не работает. Не берите в голову, что я изменил необходимые теги src в html, т.е.

Что я не изменил, так это "url" в файле javascript. И теперь, XML не загружается, потому что он пытается найти файл XML в своем собственном каталоге (another_folder / xml / xmlfile.xml), а не в корневом каталоге, где он находится.

У меня вопрос: что нужно сделать, чтобы избежать этой проблемы?

Answer 1

Используйте абсолютный URL в файле js, например,

'/project/xml/xmlfile.xml'

Если вы хотите, чтобы оно было более общим, есть другие вещи, которые вы могли бы сделать, такие как чтение текущего URL-адреса и создание из него URL-адреса ajax.

Обновление: ответ на комментарий Пример того, как вы можете создать правильный путь. Если проекты всегда являются первым подкаталогом, это должно сработать для создания правильного URL.

function xml_url(){
var first_dir_regexp = /https?:\/\/[^\/]+\/([^\/]+)\/.+/;
matches = first_dir_regexp.exec(document.location.toString());
return matches[1]+"/xml/xmlfile.xml";
}
//...
xml_url()

Этот код использует регулярное выражение для извлечения первого каталога URL-адреса и добавляет к нему /xml/xmlfile.xml.

например, , если страница является example.com/project1/awesome/index.html, она возвращает example.com/project1/xml/xmlfile.xml

Примечание этот код довольно хрупок, вы, возможно, захотите добавить к нему некоторые проверки. Это просто пример.

Если ваши проекты имеют глубину более одного уровня, вам следует рассмотреть возможность добавления некоторых параметров конфигурации, которые позволят javascript узнать больше о среде, в которой он работает.

Answer 2

Используйте URL-адреса, относящиеся к корневому веб-каталогу, а не к текущему каталогу.

$(document).ready(function()
{
    $.ajax({
        type: "GET",
        url: "/xml/xmlfile.xml", // note the leading slash
        dataType: "xml",
            ...
            ...
            ...
}

Answer 3

Поскольку я ненавижу дублирование кода, у меня тоже была такая же проблема.

Я понял это так:

Моя структура каталогов:

include_db/
  dbconnect.php
main_project/
  shared_code/
    ajax/
      ajax_script.php
    shared_js.php
  sub_project/
    sub_index.php
  index.php

Обратите внимание, что у меня действительно есть javascript в файле .php ! Я объясню, почему ниже.

С index.php Я включил общий Java, объявив это:

<script type="text/javascript" src="./shared_code/shared_js.php"></script>

С sub_index.php Я делаю это так:

<script type="text/javascript" src="../shared_code/shared_js.php?path=."></script>

Файл shared_js.php использует AJAX, поэтому вот почему он находится в .php вместо .js :

$.ajax({
  url: ".<?php echo $_GET[path]; ?>/shared_code/ajax/ajax_script.php",
  ...

Потому что я должен изменить путь к этому сценарию ajax, основываясь на том, откуда я его вызываю. И это содержимое переменной $ _ GET [путь] , которую я установил в index.php или sub_index.php .

AJAX-скрипт ajax_script.php затем снова использует пути относительно себя, поэтому он будет иметь то, что вы обычно делаете:

<?php
    require("../../../include_db/dbconnect.php");