Question

我正在尝试使用jQuery从XML文件中获取属性值，但它返回undefined且图像未加载。

在我的HTML文件中，我有一个标识为<div>的{{1}}和一个标识为answer的{{1}}。

<button>

我的jQuery代码：

showInfo

Answer 1

obj是<student>的实例，因此find()不适用于该属性。

不确定图片的正确路径是...如果/目录位于网站的根目录，请尝试添加前导images

尝试

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响应检查一次，我对响应xml做了一些小改动。希望这对你有用。

＆＃13;

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/>" );
});

＆＃13;

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

＆＃13;

Answer 3

您不必要地使用单个项目循环遍历结构，这会使事情变得比他们需要的更复杂。

＆＃13;

$("#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);
});

＆＃13;

<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>

＆＃13;

使用jQuery从XML文件中获取数据

3 个答案: