jQuery / AJAX代码片段中的脚本错误?

时间:2010-11-16 00:22:59

标签: javascript jquery html ajax

这应该是一个简单的问题,但现在已经有一段时间没有回答我。我似乎在这段代码中有一个错误,无论是脚本错误,还是我逻辑中的错误。你能否澄清一下我的问题?

以下是代码:

function GetQuestion() {
        $.ajax({
            type: "GET",
            url: "questions.xml",
            dataType: "xml",
            success: function(xml) {
                x = 0;
                x = $(xml).find('Question').length;

                var questionID = $.random(x);

                $(xml).find('Question').each(function(){
                    if(this.ID == questionID) {
                        var text = $(this).find('BODY').text();
                        $('#questionBody')[0].innerHTML = text;
                    }
                }); //close each
            } //close success
        });//close ajax
    }; //close function GetQuestion

这是为了读取XML文件,搜索具有随机ID的特定项目,并将BODY的内容插入我的HTML文件中的<p>。但是,它没有按预期工作。我在哪里犯了错误?

谢谢,Elliot Bonneville

2 个答案:

答案 0 :(得分:1)

这只是一个普遍的观察,而不是真正的答案,但它可能在将来帮助你:

//notice that this function is much easier to consume in one glance
function GetQuestion() {

    $.ajax({
        type: "GET",
        url: "questions.xml",
        dataType: "xml",
        success: GetQuestionSuccess
    });//close ajax

}; //close function GetQuestion  // <-superfluous semicolon?



//notice that this function is much easier to consume in one glance
function GetQuestionSuccess(xml) {

    //let's quit querying each time we need them
    var questions = $(xml).find('Question');  //bonus, it's a jQuery object!

    //x = 0; // <-unnecessary assignment. It gets obliterated on the next line.
    x = questions.length; //the count of all "Question"s found

    var questionID = $.random(x);

    //but wait, read my next comments below
    questions.each(function(){
        if(this.ID == questionID) {
            var text = $(this).find('BODY').text();
            $('#questionBody')[0].innerHTML = text;
        }
    }); //close each

    //since you seem to be looking for the index questionID of all the questions, 
    //why not jump to that one instead of looping?
    //also, if you only have one "#questionbody" in your document you can do this more "jquery"ish.
    $('#questionBody')[0].innerHTML = questions[questionID].find('BODY').text();

    //only one:
    $('#questionBody').html( questions[questionID].find('BODY').text() );

} //close success

所以要澄清:\

//I shredded it down to a reasonable number of lines. Could be shorter still, albeit less readable.
//but I think this is pretty readable.
function GetQuestionSuccess(xml) {

    var questions = $(xml).find('Question');

    var questionID = $.random(questions.length);

    $('#questionBody').html( questions[questionID].find('BODY').text() );

} //close success

答案 1 :(得分:0)

假设你的xml看起来像这样(因为你没有发布它)(注意标签中的大小写敏感)

<?xml version="1.0" encoding="ISO-8859-1"?>
<questionlist>
<Question ID='0'>
<BODY>
Are you 1?
</BODY>
</Question>
<Question ID='1'>
<BODY>
Are you 2?
</BODY>
</Question>
<Question ID='2'>
<BODY>
Are you 3?
</BODY>
</Question>
<Question ID='3'>
<BODY>
Are you 4?
</BODY>
</Question>
<Question ID='4'>
<BODY>
Are you 5?
</BODY>
</Question>
<Question ID='5'>
<BODY>
Are you 6?
</BODY>
</Question>
<Question ID='6'>
<BODY>
Are you 7?
</BODY>
</Question>
</questionlist>

然后你可以使用你修改过的代码版本......

<html>
<head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
       <script type="text/javascript">


function GetQuestion() {
        $.ajax({
            type: "GET",
            url: "questions.xml",
            dataType: "xml",
            success: function(xml) {
                x = 0;
                x = $(xml).find('Question').length;
                var questionID = Math.floor(Math.random() * x);

                $(xml).find('Question').each(function(){
                    if($(this).attr('ID') == questionID) {
                        var text = $(this).find('BODY').text();
                        $('#questionBody').html(text);
                    }
                }); //close each
            } //close success
        });//close ajax
    }; //close function GetQuestion

        $(document).ready(function(){
        GetQuestion();
        });
        </script>
</head>
<body>
<div id="questionBody"></div>
</body>
</html>

我更改了$ .random方法,我似乎没有这个方法所以我使用常规JS,我改变了this.ID来使用jquery选择器检查id属性,并且我改变了你的innerHTML行使用jquery html()函数。代码的唯一问题是你依赖的事实是你会对id为n-1个条目提出问题......