Question

我正在向API发出ajax请求，并且在成功时我将两个按钮添加到两个不同的div元素中。它在本地工作正常但不在我的域中。

按钮应该出现在ajax请求之后。我可以在源代码中看到按钮元素在那里。字符串的 Ctrl + f ＆＃34;加载更多＆＃34;和＃34; Excel Export＆＃34;在页面上显示找到的结果，但它们不可见。

$(document).ready(function () {

    var clientId = "client";
    var key = "api-key";
    var headers = "<table id='orders' class='table'><tr><th>..</th><th>..</th><th>..</th>......</tr></table>";
    $('#response').html(headers);
    function getOrders(token) {
        var apiURL = "https://apiURL";
        if (token != "")   apiURL += "&token=" + token;
        $.ajax({
            type: "GET",
            crossDomain: "true",
            url: apiURL,
            headers: {
                'Authorization': 'Basic ' + window.btoa(unescape(encodeURIComponent(clientId + ':' + key)))
            },
            success: function (data) {
                var data_resp = JSON.stringify(data);
                token = data.token;
                console.log(token);
                var i;
                var str = "";
                for (i = 0; i < data.length; i++) {
                    str += "<tr><td>" + data.field1 + "</td><td>" + data.field2 + "</td><td>" +
                ......
                    +"</tr>";
                }
                $('#orders tr:last').after(str);
                $('#btndiv').html("<button id='loadButton' type='button' align='center' class='btn btn-primary'>Load More</button>");
                $("#loadButton").click(function () {
                    if (token == null) alert("API returning null token");
                    else                  getOrders(token);
                });
                var exportButtonStr = "<button id='xmlDownload' class='btn btn-success'>Excel Export</button>"
                $('#export').html(exportButtonStr);
                $('#xmlDownload').click(function () {
                    $("#orders").table2excel({
                        exclude: ".noExl",
                        name: "Orders"
                    });
                });
            },
            error: function (responseData, textStatus, errorThrown) {
                $('#response').text('GET tasks failed.');
            }
        });
    }

    getOrders("");
});

<?php
include('session.php');
?>
<!DOCTYPE html>
<html>
<head>
    <title>List of Orders</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery.table2excel.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<b id="welcome">Welcome : <i><?php echo $login_session; ?></i></b>
<br><br>

<div id="response"></div>
<br><br>

<div id="btndiv" align='center'></div>
<br/>

<div id="export" align='center'></div>
<b id="logout">
    <a href="profile.php">Back</a>
</b>
<br>
<b id="logout">
    <a href="logout.php">Log Out</a>
</b>
<b id="save">Save></b>
<script src="orders.js"></script>

</body>
</html>

在ajax请求成功后，html按钮不会显示在浏览器中

0 个答案: