jQueryを使用してXMLファイルからデータを取得

Question

jQueryを使用してXMLファイルから属性値を取得しようとしていますが、undefinedが返され、画像はロードされません。

私のHTMLファイルには、answerの<div>と、showInfoの<button>の1つがあります。

xml code: 
<?xml version="1.0"?> 
    <student studentNum="5678"> 
     <image>images/mypic.jpg</image> 
    </student> 

私のjQueryコード：

$(document).ready(function(){ 
    $.ajax({ 
    url:'stu.xml', 
    data:{}, 
    type:'GET', 
    dataType:'xml', 
    success: function(resp){ 

$('#showInfo').click(function() { 

    var myInfo = $(resp).find('student'); 
    myInfo.each(function(index, obj) { 

    var myNum = ($(obj).find('student').attr('studentNum')); 
    var myImg = $(obj).find('image').text(); 

    $('#answer').append("<p> " + "Student Number: " +myNum+ 
    "<img src='" + myImg + "'/><br/>"); 
}); 
}); 
}); 

Answer 1

obj<student>のインスタンスであるのでfind()は属性には適用されません。

ないimagesディレクトリはちょうどあなたのXML応答で一度チェック

var $student = $(obj); 
var myNum = $student.attr('studentNum'); 
var myImg = $student.find('image').text(); 

$('#answer').append("<p> " + "Student Number: " +myNum+ 
    "<img src='/" + myImg + "'/><br/>"); 

Answer 2

を試してみてくださいサイト

のルートにある場合...大手/を追加してみてくださいされた画像に適切なものをパスしてください、私がやりましたレスポンスxmlに若干の変更が加えられました。それがあなたのために働くことを願っています。

var resp = '<?xml version="1.0"?><students><student studentNum="5678"><images>images/mypic.jpg</images></student><student studentNum="4576"><images>images/mypic.jpg</images></student></students>'; 
 

 
var myInfo = $(resp).find('student'); 
 
myInfo.each(function(index, obj) { 
 
    var myNum = ($(obj).attr('studentNum')); 
 
    var myImg = $(obj).find('images').text(); 
 
    $('#answer').append("<p> " + "Student Number: " + myNum + "<img src='" + myImg + "'/><br/>"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='answer'></div>

Answer 3

あなたは不必要、彼らが必要以上に物事が複雑になり、単一のアイテム、と構造をループしています。

$("#showinfo").click(function(){ 
 
    // this takes the place of the XHR response 
 
    var xml = $($.parseXML('<?xml version="1.0"?><student studentNum="1255289"><image>https://www.gravatar.com/avatar/5ed02658b2440179f00eeff8beb7aa4c?s=32</image></student>')); 
 

 
    // get the two values 
 
    var myNum = xml.find("student").attr("studentNum"); 
 
    var myImg = xml.find("image").text(); 
 

 
    // create the elements 
 
    var p = $("<p>").text("Student number: " + myNum + " "); 
 
    var img = $("<img>").attr("src", myImg); 
 
    p.append(img); 
 
    $("#answer").append(p); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="showinfo">Show</button> 
 
<p id="answer"></p>

の