jquery显示XML中的内容不起作用

时间:2014-08-15 18:21:37

标签: jquery html xml api

我无法弄清楚为什么我的代码无效。我正在http://api.careerbuilder.com/v1/jobsearch?DeveloperKey=WDHP89J6QX21LN4V61Z8&Keywords=vending&PerPage=12从CareerBuilder API获取求职结果,如果您按照该URL,您将清楚地看到XML文档明显加载。以下是一些应该从我的求职XML加载结果的jQuery:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function(){
        $("#btnGetData").click(function () {
            $("#UpdatePanel").html("Please wait...");
            $.ajax({
                url: "http://api.careerbuilder.com/v1/jobsearch?DeveloperKey=WDHP89J6QX21LN4V61Z8&Keywords=vending&PerPage=12",
                type: "GET",
                dataType: "xml",
                success: OnSuccess,
                error: OnError
            });
        });
    });

    function OnSuccess(xml) {
        var tableContent = "<table border='1' cellspacing='0' cellpadding='5'>" +
                            "<tr>" +
                                "<th>Company</th>" +
                                "<th>Job Title</th>" +
                                "<th>Employment Type</th>" +
                                "<th>Required Education</th>" +
                                "<th>Experience Required</th>" +
                                "<th>Job Details URL</th>" +
                            "</tr>";
        $(xml).find('JobSearchResult').each(function () {
            tableContent += "<tr>" +
                                "<td>" + $(this).find('Company').text() + "</td>" +
                                "<td>" + $(this).find('ONetFriendlyTitle').text() + "</td>" +
                                "<td>" + $(this).find('EmploymentType').text() + "</td>" +
                                "<td>" + $(this).find('EducationRequired').text() + "</td>" +
                                "<td>" + $(this).find('ExperienceRequired').text() + "</td>" +
                                "<td>" + $(this).find('JobDetailsURL').text() + "</td>" +
                            "</tr>";
        });
        tableContent += "</table>";
        $("#UpdatePanel").html(tableContent);
    }

    function OnError(data) {
        $("#UpdatePanel").html("Error! Please try again.");
    }

</script>
</head>
<body>
<input id="btnGetData" type="button" value="Populate Data from XML File" />
<div id="UpdatePanel" style="padding:20px 10px">

</div>
</body>
</html>

我尝试使用普通的Javascript方法,但也没有用。我只是无法弄清楚为什么它只是返回错误而不是XML文档的结果。任何帮助都会非常受欢迎。


更新

我无法用jQuery或JavaScript来解决这个问题,所以这是我使用PHP的解决方案:

<?
$xml = simplexml_load_file('http://api.careerbuilder.com/v1/jobsearch?DeveloperKey=WDHP89J6QX21LN4V61Z8&Keywords=vending&PerPage=12');
for($i=0;$i<count($xml->Results->JobSearchResult);$i++){
    echo '<a href="'.$xml->Results->JobSearchResult[$i]->JobDetailsURL.'" class="job" target="_blank"><strong>'.$xml->Results->JobSearchResult[$i]->ONetFriendlyTitle.'</strong><br />'.$xml->Results->JobSearchResult[$i]->Company.'<br /><span>'.$xml->Results->JobSearchResult[$i]->City.', '.$xml->Results->JobSearchResult[$i]->State.'</span></a>';
}
?>

也许可以帮助别人。

0 个答案:

没有答案