jquery初學者的數據表

-2

如果我想創建使用freegeoip.net屬性的表，我該如何使用jquery數據表？項目的目標是從freegeoip.net接收數據，然後將其放入數據表中。這是我的代碼與HTML。我試圖數據保存到HTML太jquery初學者的數據表

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>idAddress</title> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 

 

 
<input id="ip" type="text" name="textField" placeholder="Enter Ip Address"><br/><br/> 
 
<input id="button" type="submit" value="submit Adress"> 
 
<input id="button2" type="button" value="sent" onclick="cheak()"> 
 

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

 

 
<script type="text/javascript"> 
 
    var ipAdd; 
 
    window.cond = false; 
 
    var index = 0; 
 
    function validateIp(ipAdd) { 
 
    var save = /^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/; 
 
    return save.test(ipAdd); 
 
} 
 

 
function validate() { 
 
    index++; //for storing data in array . . 
 
    
 
    ipAdd = $("#ip").val(); 
 

 
    if (validateIp(ipAdd)) { 
 
    console.log("valid"); 
 

 
    
 
    } else { 
 
    console.log("invalid"); 
 
    } 
 
    
 
} 
 

 
$("#button").bind("click", validate); 
 

 

 
function cheak(){ 
 

 
var info = []; 
 
    
 
$.ajax({ 
 
    url:'https://freegeoip.net/json/'+ipAdd, 
 
    type:"Get", 
 
    dataType:'json', 
 
    success:function(data){ 
 
     
 
     info[index] = JSON.stringify(data); 
 
     document.getElementById("p").innerHTML = info[index]; 
 
     
 

 
    }, 
 
    error: function(XMLHttpRequest, textStatus, errorThrown) { 
 
    console.log("please cheak your IpAdress"); 
 
    } 
 

 

 
    
 
    
 
}); 
 
    
 
     
 

 
    
 
} 
 

 
</script> 
 

 

 
</body> 
 
</html>

來源

2017-07-17 Adil

'未捕獲的ReferenceError：運行你的代碼段時validateEmail不defined'。這應該是一個開始 – Jamiec

請在答案部分查看代碼片段。我已對代碼進行了更改。爲了您的要求，只需要按給定的順序添加數據表js和jquery。 –

試試這個，

 var dataSet =[data]; 

    $('#example').DataTable({ 
     data: dataSet, 
     columns: [ 
      { "data": "ip" }, 
      { "data": "country_code" }, 
      { "data": "country_name" }, 
      { "data": "region_code" }, 
      { "data": "region_name" }, 
      { "data": "city" }, 
      { "data": "zip_code" }, 
      { "data": "time_zone" }, 
      { "data": "latitude" }, 
      { "data": "longitude" }, 
      { "data": "metro_code" } 
     ], 
     searching:false, 
     paging:false, 
     info:false, 
    });

對於您需要包括以下腳本數據表。

//code.jquery.com/jquery-1.12.4.js 
https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js 
https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css

JS搗鼓相同 https://jsfiddle.net/tgLybw2e/10/

來源

2017-07-17 13:21:32

非常感謝你。上帝保佑你。。 – Adil

在你的剪切鏈接上工作，但不能在我的文件中工作，它不會把數據放在表中。。。 – Adil

請將您的代碼更新爲更新的代碼片段或jsfiddle。所以我可以找到你的問題。 –

 
 
var ipAdd; 
 
window.cond = false; 
 
var index = 0; 
 
function validateIp(ipAdd) { 
 
    var save = /^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/; 
 
    return save.test(ipAdd); 
 
} 
 

 
function validate() { 
 
    index++; //for storing data in array . . 
 
    
 
    ipAdd = $("#ip").val(); 
 

 
    if (validateIp(ipAdd)) { 
 
    console.log("valid"); 
 

 
    
 
    } else { 
 
    console.log("invalid"); 
 
    } 
 
    
 
} 
 

 
$("#button").bind("click", validate); 
 

 
$('#button2').click(function(){ 
 
//function cheak(){ 
 

 
var info = []; 
 
$.ajax({ 
 
    url:'https://freegeoip.net/json/'+ipAdd, 
 
    type:"Get", 
 
    dataType:'json', 
 
    success:function(data){  
 
     // Replace this code with datatable binding code as below 
 
     // info[index] = JSON.stringify(data); 
 
     // document.getElementById("p").innerHTML = info[index]; 
 
     
 
    // Below code for data table binding 
 
    $('#example').show(); 
 

 
    // coversion of json data to array object 
 
    var dataSet =[data];  
 
    
 
    $('#example').DataTable({ 
 
     data: dataSet, 
 
     columns: [ 
 
      \t { "data": "ip" }, 
 
      { "data": "country_code" }, 
 
      { "data": "country_name" }, 
 
      { "data": "region_code" }, 
 
      { "data": "region_name" }, 
 
      { "data": "city" }, 
 
      { "data": "zip_code" }, 
 
      { "data": "time_zone" }, 
 
      { "data": "latitude" }, 
 
      { "data": "longitude" }, 
 
      { "data": "metro_code" } 
 
     ], 
 
     searching:false, 
 
     paging:false, 
 
     info:false, 
 
    }); 
 
     
 
    }, 
 
    error: function(XMLHttpRequest, textStatus, errorThrown) { 
 
    console.log("please cheak your IpAdress"); 
 
    } 
 
    
 
});  
 
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> 
 
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 

 
<body> 
 

 

 
<input id="ip" type="text" name="textField" placeholder="Enter Ip Address"><br/><br/> 
 
<input id="button" type="submit" value="submit Adress"> 
 
<input id="button2" type="button" value="sent" > 
 

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

 
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%" style="display:none;"> 
 
     <thead> 
 
      <tr> 
 
       <th>IP</th> 
 
       <th>Country code</th> 
 
       <th>Country name</th> 
 
       <th>Region code</th> 
 
       <th>Region name</th>. 
 
       <th>City</th> 
 
       <th>Zip code</th> 
 
       <th>Time zone</th> 
 
       <th>Latitude</th> 
 
       <th>Longitude</th> 
 
       <th>Metro code</th> 
 
      </tr> 
 
     </thead> 
 
</table> 
 

 

 
</body>

來源

2017-07-21 04:48:30

jquery初學者的數據表

回答

相關問題