时间戳

首页 > 解决方案 > 当我尝试加载我的 JqueryDataTable 时出现 Ajax 错误

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

问题描述

我尝试在此处获取我的 Json：“ https://www.suale.it/Pet/scriptWS.aspx?func=caricaDatatable&Lat=0&lon=0 ”与 JSONP （将其捕获为 < script src 以绕过 CORS）
当它尝试加载我的 jquery 数据表（此处命名为“示例”）它给出了错误，我没有任何线索来理解发生了什么。
我还尝试使用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>

标签： jsondatatables

解决方案

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

当数据源在对象中时，我们可以使用 Datatables 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>

推荐阅读