Question

我尝试使用JSONP（将其捕获为<脚本src以绕过CORS的方式）在这里获得我的Json：“ https://www.suale.it/Pet/scriptWS.aspx?func=caricaDatatable&Lat=0&lon=0”
当它尝试加载我的jquery数据表（在这里命名为“ example”）时，它给出了错误，并且我没有任何线索来了解发生了什么。
我还尝试使用https://jsonlint.com/验证json，它是有效的！
我需要帮助以更好地了解问题所在

          
		function clickButton() {
		  //var obj, s
		  //obj = { table: "products", limit: 10 };
		  s = document.createElement("script");
		  s.src = "https://www.suale.it/Pet/scriptWS.aspx?func=LoadDataTable&Lat=0&lon=0"
		  
		  document.body.appendChild(s);
		}
		
	
	function LoadDataTable(data)
	{
	  $('#example').DataTable( {
        "ajax": JSON.stringify(data),
        "columns": [
            { "data": "titolo" },
            { "data": "Lat" },
            { "data": "lon" }
        ]
    } );
	}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>



 <p id="demo"></p>

 
   <input type=button onclick="clickButton()" value="prova">

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>titolo</th>
                <th>Lat</th>
                <th>lon</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>titolo</th>
                <th>Lat</th>
                <th>lon</th>
            </tr>
        </tfoot>
    </table>

Answer 1

您应该使用Datatables Data选项而不是Ajax，因为这会从更新的DOM / Javascript中加载它。

当数据源位于对象中时，我们可以使用数据表columns.data来映射您的数据对象键。因此，您的data : objkey必须匹配并纠正。

function LoadDataTable(data)
    {
      $('#example').DataTable( {
        data: data,
        "columns": [
            { "data": "Titolo" },
            { "data": "Latitudine" },
            { "data": "Longitudine" }
        ]
    } );
    }

修改后的工作演示：

var dataSet = [{"Titolo":"colonia di formiche","Latitudine":"-33.905635","Longitudine":"151.195331","Icona":"/ICO0.jpg","HTML":null},{"Titolo":"colonia di formiche","Latitudine":"-33.905635","Longitudine":"151.195331","Icona":"/ICO0.jpg","HTML":null},{"Titolo":"colonia di formiche","Latitudine":"-33.905635","Longitudine":"151.195331","Icona":"/ICO0.jpg","HTML":null},{"Titolo":"colonia di formiche","Latitudine":"-33.905635","Longitudine":"151.195331","Icona":"/ICO0.jpg","HTML":null},{"Titolo":"colonia di formiche","Latitudine":"-33.905635","Longitudine":"151.195331","Icona":"/ICO0.jpg","HTML":null},{"Titolo":"colonia di formiche","Latitudine":"-33.905635","Longitudine":"151.195331","Icona":"/ICO0.jpg","HTML":null},{"Titolo":"colonia di formiche","Latitudine":"-33.905635","Longitudine":"151.195331","Icona":"/ICO0.jpg","HTML":null},{"Titolo":"colonia di formiche","Latitudine":"-33.905635","Longitudine":"151.195331","Icona":"/ICO0.jpg","HTML":null},{"Titolo":"colonia di formiche","Latitudine":"-33.905635","Longitudine":"151.195331","Icona":"/ICO0.jpg","HTML":null},{"Titolo":"colonia di formiche","Latitudine":"-33.905635","Longitudine":"151.195331","Icona":"/ICO0.jpg","HTML":null}];

function clickButton() {
/*
I've to comment this and copied response data to dataset variable, so this demo will always working even when the original link dissappeared in future
/*
/*
		  s = document.createElement("script");
		  s.src = "https://www.suale.it/Pet/scriptWS.aspx?func=LoadDataTable&Lat=0&lon=0"

		  document.body.appendChild(s);
*/
      LoadDataTable(dataSet);
}

function LoadDataTable(data)
	{
	  $('#example').DataTable( {
        data: data,
        "columns": [
            { "data": "Titolo" },
            { "data": "Latitudine" },
            { "data": "Longitudine" }
        ]
    } );
	}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

<input type=button onclick="clickButton()" value="prova">

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>titolo</th>
                <th>Lat</th>
                <th>lon</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>titolo</th>
                <th>Lat</th>
                <th>lon</th>
            </tr>
        </tfoot>
    </table>

当我尝试加载我的JqueryDataTable时出现Ajax错误

1 个答案: