Question

我正在尝试将我在文本文件中的一些HTML源代码加载到jquery中。当我单击链接添加文本时，没有任何内容加载到页面中。有什么建议？

装载脚本：

<div data-role="collapsible" data-collapsed="true">
    <h3>Accordion Concept</h3>
    <p>The accordion concept splits the page into catagories to save space. Each catagory contains information but this information is collapsed in order to make it so you only see the information you want to see on the page.</p>
    <div id = "loadEx">Click Here to Load Example Script File</div>
    <script>
        $( "#loadEx" ).click(function() {
            $('#hello').load('mywebpage.txt');
        });
    </script>
    <pre id = "hello"></pre>
</div>

文本文件：

<body class="container">
    <div data-role="page">
        <div data-role="header">
            <h1> Page  One Title </h1>
        </div>
        <div data-role="content">
            <div data-role="collapsible-set" >
                <div data-role="collapsible" data-collapsed="true">
                    <h3> Header number one </h3>
                    <p> information for header number one is here. </p>
                </div>
                <div data-role="collapsible" data-collapsed="true">
                    <h3> Header number two </h3>
                    <p> information for header number two is here. </p>
                </div>
                <div data-role="collapsible" data-collapsed="true">
                    <h3> Header number three </h3>
                    <p> information for header number three is here. </p>
                </div>
            </div>
            <div data-role="footer">
                Copyright
            </div>   
        </div>

</body>

Answer 1

通过评论出现了真正的问题：

我会在CSS中改变什么才能使它显示为文本而不是HTML？

你不会使用CSS。您不需要使用load方法（用于处理HTML而不是文本）。

使用不那么简便的Ajax函数，并手动将数据作为文本放入元素中。

        $( "#loadEx" ).click(function() {
            $.get('mywebpage.txt', function (data) {
                $('#hello').text(data);
            });
        });

Answer 2

首先加载dom然后使用$ .get函数。

$(document).ready(function(){
   $( "#loadEx" ).click(function() {

  $('#hello').html("hey there, I am calling get request");
  $.get('mywebpage.txt',function(data,status){
    if(status == "error"){
        alert("File not found "+status);
    }

    $('#hello').html(data);

  });

 });

尝试使用JQuery加载HTML源代码

2 个答案: