Question

所以我正在制作一个动态下拉选择表单，我需要每个菜单从预先构建的html块（位于，例如，http://example.com/menu/choices）传播可能的选择是否有一个简单的方法使用javascript获取远程页面的html，然后将其插入页面？我知道我可以使用.write（）来插入代码，我只是不知道如何获取它。

谢谢！

Answer 1

你想要的东西叫做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>

Answer 2

你更善于使用jQuery。只需查看Ajax方法，您就可以了解它。 http://api.jquery.com/category/ajax/

Answer 3

实际上，您无法使用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文件的过程。您可以立即删除脚本元素（或不是，取决于您）。

在上面，我已经将元素添加到document.body，因为它很方便，无论你在哪里添加它都无关紧要。但是，您看到的大多数脚本通常会将其添加到head。那也没关系。更多内容见this article，尽管它主要关注原型库。

如果你使用像jQuery，Closure，Prototype，YUI或any of several others这样的JavaScript库，说到上述所有库都可以使用，它可能会让你（甚至）更容易。

更新：您之后是否添加了jQuery代码？我最初没有看到它。使用jQuery，如果您从与文档相同的原点加载脚本，则可以使用getScript function：

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

但是，getScript与上述技术不同。 Same Origin Policy会妨碍getScript，而script标记则不会。{/ p>

加载标记

如果您想加载HTML标记并将其应用到页面的一部分，可以使用jQuery.load轻松完成：

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

这将使用从给定URL返回的HTML替换id为“someid”的元素的内容。 option将select加载到{{1}}和Here's a live example中，将文本（段落）加载到div中。使用库（比如jQuery）更容易，因为库存在的某些元素存在一些问题。

Answer 4

出于安全原因，Javascript通常无法访问其他网站。如果我们可以通过脚本从我们想要的任何地方加载内容，我们会看到一些非常猖獗的混乱。一个简单的解决方案是使用其他文档的iframe或只是其中的一部分。

网站是否仍然可以访问该信息？如果您可以找到一个界面，您可以获取信息并粘贴在文档中。否则你必须做一些刮擦。

Answer 5

假设您有以下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代码注入DIV元素。

这是jQuery代码。希望它有所帮助！

使用javascript获取远程代码/文本？

5 个答案:

正在加载代码

加载标记