Question

我正在尝试从远程服务器获取数据并将其显示在表中。 javascript函数不会运行，也不会在屏幕上显示任何内容（选项卡2）。

这是我的index.html：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script type="text/javascript" src="js/fetchData.js"></script>


    <script>
        ons.bootstrap();
    </script>

</head>
<body>
    <ons-tabbar var="tabbar">
        <ons-tabbar-item
            icon="institution"
            label="shops"
            page="navigator.html"
            active="true"> </ons-tabbar-item>
       <ons-tabbar-item
            icon="tags"
            label="Coupens"
            page="coupns.html"></ons-tabbar-item>
        <ons-tabbar-item
            icon="sign-in"
            label="BeaconCatch"
            page="page3.html"></ons-tabbar-item>
    </ons-tabbar>




</body>
</html>

我想在第二个标签中加载Coupns.html文件。当我单击选项卡2（Coupnes）时它没有显示任何内容。

这是我的coupns.html文件

    <!DOCTYPE HTML>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
        <link rel="stylesheet" href="components/loader.css">
        <script src="components/loader.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
            // PhoneGap event handler
            document.addEventListener("deviceready", onDeviceReady, false);
            function onDeviceReady() {
                console.log("PhoneGap is ready");
            }
        </script>


        <script>



    console.log("start");
    var form = new FormData();
    form.append("timestamp", "2016-12-02");

    var response = 0;

    var settings = {
      "async": true,
      "crossDomain": true,
      "dataType": "Json",
      "url": "http://xx.xxxxxx.com/xxxxx/coupens/",
      "method": "POST",
      "headers": {
        "authorization": "Basic xxxxxxxxxxxxxxxxxxxx",
        "cache-control": "no-cache",

      },
      "processData": false,
      "contentType": false,
      "mimeType": "multipart/form-data",
      "data": form
    }

    $.ajax(settings).done(function (response) {
    console.log("response");


    var url1=response.coupon[0].main_image;
    var url2=response.coupon[1].main_image;
    var url3=response.coupon[2].main_image;
    var url4=response.coupon[3].main_image;

     var table = document.getElementById("myTable");
        var row1 = table.insertRow(0);
        var cell1 = row1.insertCell(0);
        var cell2 = row1.insertCell(1);
        var img1 = document.createElement('img');
        var img2 = document.createElement('img');
        img1.src = url1;
        img2.src = url2;
        img1.width = "150";
        img1.height = "250";
        img2.width = "150";
        img2.height = "250";
        cell1.appendChild(img1);
        cell2.appendChild(img2);



        var row2 = table.insertRow(1);
        var cell2 = row2.insertCell(0);
        var cell3 = row2.insertCell(1);
        var img3 = document.createElement('img');
        var img4 = document.createElement('img');
        img3.src = url2;
        img4.src = url3;
        img3.width = "150";
        img3.height = "250";
        img4.width = "150";
        img4.height = "250";

        cell2.appendChild(img3);
        cell3.appendChild(img4);

       var row3 = table.insertRow(2);
        var cell4 = row3.insertCell(0);
        var cell5 = row3.insertCell(1);
        var img5 = document.createElement('img');
        var img6 = document.createElement('img');
        img5.src = url2;
        img6.src = url3;
        img5.width = "150";
        img5.height = "250";
        img6.width = "150";
        img6.height = "250";

        cell4.appendChild(img5);
        cell5.appendChild(img6);  

    });

 </script>  
    </head>
    <body>
    <div>
      <table id="myTable"> 
    </table>  
    </div>
    </body>
    </html>

为什么没有在coupns.html中加载图像（图像）？

Answer 1

您是否尝试通过ajax从远程服务器（其他主机）获取数据？那么Same Origin Policy呢。浏览器控制台显示任何消息？

无法使用javascript [OnsenUI]加载动态表

1 个答案: