Question

<script type"text/Javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
    $("#button").click(function(){
        htmlobj = $.ajax({url:"test.txt",async:false});
        $("#lyrics").html(htmlobj.responseText);
    });
});

<div id=lyrics> This text must change </div>
<button id="button">small axe</button>

我正在尝试使用AJAX插入歌词，但它无法正常工作，我找不到错误。

Answer 1

你试图让答案文字出错。

使用此：

$(document).ready(function(){
    $("#button").click(function(){
        $.ajax({
            url:"test.txt",
            success: function(responseText) {
                $("#lyrics").html(responseText);
            }
        });
    });
});

您必须仅在ajax请求的success事件中处理响应。它外面是无法访问的。

Answer 2

使用加载功能，它更容易一些。我修复了你的标记，id缺少引号，还更新了按钮属性，以便它可以用于多个文件。

更新了html：

<div id="lyrics"> This text must change </div>
<button class="button" id="smallAxe">small axe</button>

更新了js：

$(".button").click(function(){   
    var filename = $(this).attr('id');   
    $("#lyrics").load(filename+".txt");
});

这会将名为'smallAxe.txt'的文件的内容加载到div#lyrics。

或者，您可以创建一个单独的html文件，并将其称为“marley.html”，并在其中放入一堆歌曲，每首歌曲都包含在div中，其中id表示该拼贴，如：

<div id='small_axe'>lyrics...</div>

<div id='stir_it_up'>lyrics...</div>

<div id='one_love'>lyrics...</div>

<div id='400_years'>lyrics...</div>

并像这样调用该文件的歌词......

<button class="button" data-song="small_axe" data-artist="marley">small axe</button>

$(".button").click(function(){   
    var artist = $(this).data('artist');   
    var song = $(this).data('song');   
    $("#lyrics").load(artist+".html #"+song);
});

使用带有api的ajax将div更改为另一个文本

2 个答案: