使用jQuery读取XML文件时link元素文本无法获取的问题

我使用jQuery读取XML文件时，可正常获取<status>元素的id属性、<text>元素文本、<user name>元素文本，但无法读取<status>下<link>元素的文本内容，alert输出为空，页面也无法显示该内容。相关代码片段如下：

HTML文件 #

<!DOCTYPE html>
<html lang="en">  
<meta name="viewport" content="width=device-width, initial-scale=1"; charset="UTF-8">
    <head><title>Reading XML File Using jQuery AJAX Method</title> 
        
    </head>     
    <body>
        <h2> How To Read XML Data - 2 </h2>
        <div class='timeline'>
            <ul></ul>
        </div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"> </script>
        <script src="raReadXMLByJquery-2.js" type="text/javascript"></script>       
        
    </body>
</html>

XML文件（raReadXMLByJQuery-2.xml） #

<?xml version="1.0" ?>
 
<statuses>

     <status id='555'>
        <id> 123</id>   
        <text>This is text 1</text>
        <link> http://google.com </link>
        <link> http://google.co.uk </link>
        <user>
            <name> Jack </name>
        </user>  
     </status>
     
     <status id='666'>
        <id> 456 </id>  
        <text>This is text 2</text>
        <link> http://google.com </link>
        <link> http://google.co.uk </link>
        <user>
            <name> Sara </name>
        </user>  
     </status>
      
</statuses>

JavaScript文件（raReadXMLByJquery-2.js） #

$(document).ready( function() {  //11
    $.ajax({  //22
        url: 'raReadXMLByJQuery-2.xml',  
        //dataType: 'xml',  //this line is not working
        dataType: 'text',
        success: function (data){ //44
        
            $(data).find('status').each ( function() {  //55
                var status = $(this).find('text').text();
                var id = $(this).attr('id');
                var user = $(this).find('user name').text();
                var link = $(this).find('link').text();
                alert (link);
                
                $('.timeline ul').append ( //66
                    $('<li />', { //77
                        text: '(' + id + ') ' + status + ' - ' + user + ' - ' + link  //9999
    
                    })  //77
                
                );  //66
                
                    
            }); //55
        },  //44
        error: function(){ //33
                            
                            $('.timeline').text('There was an error baby!'); 
                         }  //33
    });  //22
    
});  //11

问题原因及修复方案 #

核心问题：dataType设置错误 #

你将dataType设为'text'，jQuery会把返回的XML内容当作纯文本处理，而非XML文档结构。这种情况下，$(data).find('link')无法正确识别XML节点，自然获取不到文本内容。

另外，每个<status>下存在多个<link>节点，直接调用.text()会将所有link的文本拼接在一起，若需要区分多个链接，建议单独遍历处理。

修复步骤： #

1. 恢复dataType为xml
   取消dataType: 'xml'的注释，删除dataType: 'text'。如果之前设置xml报错，大概率是XML文件路径错误，或是直接本地打开HTML文件导致的跨域问题（建议使用本地服务器如VS Code Live Server、XAMPP运行项目）。

2. 正确处理多个节点
   遍历每个<link>节点，将文本内容收集后拼接成合适格式（例如用分隔符区分，或转为可点击链接）。

修正后的JavaScript代码 #

$(document).ready(function() {
    $.ajax({
        url: 'raReadXMLByJQuery-2.xml',
        dataType: 'xml', // 改为xml类型
        success: function(data) {
            $(data).find('status').each(function() {
                // 去除文本前后空格，优化显示效果
                var statusText = $(this).find('text').text().trim();
                var id = $(this).attr('id');
                var userName = $(this).find('user name').text().trim();
                
                // 收集所有link文本
                var linkList = [];
                $(this).find('link').each(function() {
                    linkList.push($(this).text().trim());
                });
                // 用竖线分隔多个链接
                var linkText = linkList.join(' | ');

                $('.timeline ul').append(
                    $('<li />', {
                        text: '(' + id + ') ' + statusText + ' - ' + userName + ' - ' + linkText
                    })
                );
            });
        },
        error: function() {
            $('.timeline').text('读取XML文件出错！');
        }
    });
});

额外提示 #

• 确保XML文件路径正确，与HTML、JS文件处于同一目录，或使用正确的相对路径。
• 本地直接打开HTML文件会触发浏览器跨域限制，必须通过本地服务器运行项目才能正常加载XML文件。
• 使用.trim()可以去除文本前后的冗余空格，让页面显示更整洁。

内容的提问来源于stack exchange，提问作者ReA