通过jQuery与另一个html文件的内容更改div内容 [英] Changing div content via jquery with another html file's content

问题描述

首先，我花了几个小时浏览相关主题的stackoverflow。他们中的许多人似乎与我遇到的问题非常相似，甚至有一对夫妇几乎完美地像我一样。但是，为他们工作的修复似乎不适合我。我认为最好是发布我的代码并让其他人看看他们;我会尝试尽可能详细。

我在做什么：
我有一个链接在里面的页面设置，当它被点击，它应该从我制作的另一个页面中拉出一些html内容。更具体地说，它应该从该页面中的特定div标识中提取html内容。

我的导航菜单的HTML部分：

 < ul id =nav_main> 
< li class =navLink>链接此处< / li> 
< / ul> 
  

应该动态更改的div（点击时）标记为：

 < div id =main_content> 
< p>< / p> 
< / div> 
  

另一个.html文件，我从中提取数据的div有如下所示：

 < div id =one> blahbalhblahblahlbhalbhlah< / div> 
  

我遇到困难的部分是javascript代码。我曾尝试使用负载并获得，并且都没有工作。这是我的骨架代码：

  $（document）.ready（function（）{
 $（＃nav_main （click，function（）{
 //这里是我的第一次尝试：
 $（＃main_content p）。load（contentholder.html #one）; 
 
 //第二次尝试，使用get（）：
 $ .get（contentholder.html，function（data）{
 $（＃main_content p） .html（data）
}）; 
}）; 
  

我的问题这是#main_content似乎没有改变，我认为问题是加载和获取尝试不起作用，它们似乎并没有按照它应该的那样拉出数据。

所有这些文件都在我的本地驱动器上，任何帮助都将不胜感激

解决方案

<除了Brad M指出的语法错误之外，请记住，如果大多数浏览器不是由服务器创建的，则大多数浏览器都会阻止AJAX调用，所以如果您没有运行在本地主机上，您在进行AJAX调用时很可能会收到访问控制 - 允许 - 来源错误。

在此处查看更多信息：

To begin, I have spent the last few hours browsing stackoverflow on related topics. Many of them seemed very similar to the issue I'm having, there was even a couple that resembled mine almost perfectly. However, the fixes that worked for them do not seem to be working for me. I think it would be best for me to post my code and have others look them over; I will try to be as detailed as possible.

What I'm trying to do: I have a page setup with links inside li's, and when it is clicked, it is supposed to pull some html content from another page I made. More specifically, it is supposed to pull out the html content from a specific div id in that page. I am having trouble pulling anything out from it, and having it posted to my main pages div.

My HTML part with the navigation menu:

<ul id="nav_main">
    <li class="navLink">link here</li>
</ul>

The div that is supposed to change dynamically (on click) is labeled as this:

<div id="main_content">
    <p></p>
</div>

The other .html file that I pull data from has a div that looks like this:

<div id="one">blahbalhblahblahlbhalbhlah</div>

The part I am having difficulty with is the javascript code. I have tried using load and get, and neither seem to be working. Here is my skeleton code:

$(document).ready(function(){
    $("#nav_main li").on("click", function() {
        // here was my first attempt:
        $("#main_content p").load("contentholder.html #one");

        // my second attempt, using get():
        $.get("contentholder.html", function(data) {
            $("#main_content p").html(data)
        });
});

My problem with this is that the #main_content doesn't seem to be changing. I think the problem is that the load and get attempts aren't working, they don't seem to be pulling the data out as it's supposed to.

All these files are on my local drive. Any help would be greatly appreciated

解决方案

In addition to your syntax errors pointed out by Brad M, keep in mind that most browsers prevent AJAX calls if they aren't made from a server, so if you aren't running a localhost, you will most likely get an Access-Control-Allow-Origin error when making the AJAX call.

See more info here: Get HTML code of a local HTML file in Javascript

这篇关于通过jQuery与另一个html文件的内容更改div内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！