Получение удаленного кода / текста с помощью JavaScript?

Question

Итак, я работаю над созданием динамической выпадающей формы выбора, и мне нужно, чтобы каждое меню распространяло возможные варианты из предварительно созданного фрагмента HTML (расположенного, скажем, по адресу http://example.com/menu/choices), есть простой способиспользовать javascript для получения HTML-кода удаленной страницы, а затем подключить его к странице? Я знаю, что могу использовать .write () для вставки кода, я просто не знаю, как его получить.

Спасибо!

Answer 1

Предположим, у вас есть следующая разметка HTML

<div id="fakeDiv"></div>

Вы можете выполнить запрос Ajax, как это

$.ajax({
    type: "get",
    dataType: "html",
    url: "http://example.com/menu/choices",
    data: {},
    success: function(response) {
        $("#fakeDiv").html('').html(response);
    },
});

для вставки html-кода, возвращаемого вашим URL, в элемент DIV.

Это код jQuery. Надеюсь, это поможет!

Answer 2

Javascript обычно не может получить доступ к другим веб-сайтам по соображениям безопасности. Если бы мы могли загружать контент из любого места с помощью скрипта, мы бы увидели довольно безудержный хаос. Простое решение - это iframe с другим документом или его частью.

Есть ли на сайте доступ к этой информации? Если вы можете найти интерфейс, вы можете просто получить информацию и вставить в документ. В противном случае вам придется немного поцарапать.

Answer 3

Вы лучше используете для этого jQuery. Просто посмотрите на методы Ajax, и вы освоите его. http://api.jquery.com/category/ajax/

Answer 4

На самом деле, вы не можете использовать write для вставки кода, не после завершения первоначального рендеринга страницы.

Загрузка кода

Мое первое чтение вашего вопроса состояло в том, что выхотел загрузить код - например, JavaScript.Вот как вы это делаете, но смотрите ниже.

Самый простой способ сделать это, если ваш код существует в своем исходном местоположении в файле JavaScript, и все готово для включения в файл обычным способом.В этом случае все, что вам нужно сделать, это создать элемент script и добавить его в документ:

var script = document.createElement('script');
script.type = "text/javascript";
script.src = /* ... the URL of the code ... */;
document.body.appendChild(script);
document.body.removeChild(script);

Обратите внимание, что в последней строке удаляется узел script сразу после вставки его в документ,Вставка узла - это все, что вам нужно сделать, это немедленно запускает процесс, с помощью которого файл JavaScript извлекается и интерпретируется.Вы можете немедленно удалить элемент script (или нет, это зависит от вас).

Выше я добавил элемент в document.body, потому что это удобно и не имеет значения, где вы его добавляете,Однако большинство сценариев, которые вы видите, делают это, как правило, вместо этого добавляют его в head.Это тоже хорошо.Подробнее в этой статье , хотя она сосредоточена на библиотеке прототипов.

Говоря о библиотеках, несмотря на все вышеперечисленное, если вы используете библиотеку JavaScript, такую ​​как jQuery , Закрытие , Прототип , YUI или любой из нескольких других , это, вероятно, сделает это (даже) легче для вас.

---

Обновление : Вы добавили тег jQuery позже?Я не видел это первоначально.В jQuery, если вы загружаете скрипт из того же источника, что и документ, вы можете использовать функцию getScript :

jQuery.getScript('ajax/test.js');
// Or $.getScript('ajax/test.js');

Однако ,getScript отличается от описанного выше.getScript будет препятствовать политике Same Origin * , а добавление тега script - нет.

Загрузка разметки

Если вы хотите загрузить разметку HTML ипримените его к части страницы, это легко сделать с помощью jQuery.load:

$('#someid').load("yoururl.here");

, который заменит содержимое элемента с идентификатором "someid" на HTML, возвращаемый из данного URL. Вот живой пример , который загружает option s в select и другой , который загружает текст (абзац) в div.Это проще с библиотекой (например, jQuery), потому что есть некоторые проблемы вокруг определенных элементов, которые библиотеки обычно обрабатывают для вас.

Answer 5

То, что вы хотите, называется AJAX (асинхронный JavaScript и XML).Если вы используете jQuery:

$('#my-select-thingy').load('select-options.cgi');

или любой другой вариант серверной части, который вы предпочитаете.У вас должно быть что-то вроде этого в HTML:

<div id="my-select-thingy">
  <!-- select will go here -->
</div>

, а URL выше должен возвращать что-то вроде этого:

<select>
  <option>Foo</option>
  <option>Bar</option>
</select>