innerhtml结果格式更好

时间:2018-10-03 06:56:08

标签: javascript html

我是编码方面的新手,一个星期前才开始学习它。 简而言之,我在这里有代码。

function lookup (){
	var mac_address = document.getElementById('mac_address');
	var resultDiv = document.getElementById("result");
	if(mac_address.value.length<6){
		alert('Enter at least 6 characters!')
	}else{
		var lookUpAdress = '<object type="text/html" id="lookupresult" data="http://macvendors.co/api/jsonp/'+mac_address.value+'"></object>';
		resultDiv.innerHTML=lookUpAdress;
	}
	
}
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="w3-container w3-card-4 w3-light-grey w3-text-black w3-margin">
<div style="padding:0px;">
	<label>Enter mac address:</label>
	<input type="text" id="mac_address" />
	<input type="button" value="Lookup!" onclick="lookup();" />
	<div id="result" style="margin-top:10px;" class="w3-container w3-card-4 w3-light-grey w3-text-black w3-margin">
	</div><!-- Result. -->
</div><!-- Input Box. -->
</div><!-- Container. -->
</body>
</html>

我想获得Look Up的结果,并以更好的格式显示它,例如: 公司名称: 字首 : 地址:

请注意,我很高兴得到“公司”。

TIA。

2 个答案:

答案 0 :(得分:0)

将jQuery和您的html一起加载,请确保已加载jQuery,否则您将无法使用$ .ajax,并且必须使用JavaScript。而且使用jquery比使用javascript操纵dom要容易得多。因此,如果您是初学者,请先学习jquery,然后继续使用javascript。

<script
          src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

使用上面的一个或任何其他。您可以使用Google jQuery CDN。

然后将脚本添加到html的底部:

    <script>
    $(document).ready(function(){
     GetMacAddress();
    });
function GetMacAddress(){
$.ajax({
       url:'http://macvendors.co/api/jsonp/34:13:e8:1b:82:e4',
       type:'get',
       success:function(data){
          // do something with data
          alert(data.result.company);
       },
       error:function(){
         console.log('oops');
       },
});
}
    </script>

此代码将为您提供结果,更改代码以适合您的需求,即在文本框中显示内容

答案 1 :(得分:0)

我想这可以解决您的问题,但是:

  • 您必须查找如何在非jQuery(或使用jQuery)中做到这一点
  • 我无法通过https连接使用它

$.getJSON('https://anyorigin.com/go?url=http%3A//macvendors.co/api/jsonp/34%3A13%3Ae8%3A1b%3A82%3Ae4&callback=?', function(data){
	console.log(data.contents);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

您可以在此处了解更多信息: https://medium.freecodecamp.org/client-side-web-scraping-with-javascript-using-jquery-and-regex-5b57a271cb86