用bootstrap 写一个查询域名DNS记录的页面让用户可以输入要查询的域名和要查询的类型提交后显示8888、114114114114 等dns查询的记录
<!DOCTYPE html>
<html lang="en">
<head>
<title>DNS Record Lookup</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>DNS Record Lookup</h2>
<form>
<div class="form-group">
<label for="domain">Domain Name:</label>
<input type="text" class="form-control" id="domain" placeholder="Enter domain name">
</div>
<div class="form-group">
<label for="type">Record Type:</label>
<select class="form-control" id="type">
<option value="A">A</option>
<option value="AAAA">AAAA</option>
<option value="CNAME">CNAME</option>
<option value="MX">MX</option>
<option value="NS">NS</option>
<option value="PTR">PTR</option>
<option value="SOA">SOA</option>
<option value="SRV">SRV</option>
<option value="TXT">TXT</option>
</select>
</div>
<button type="button" class="btn btn-primary" onclick="lookup()">Lookup</button>
</form>
<br>
<div id="result"></div>
</div>
<script>
function lookup() {
var domain = $('#domain').val();
var type = $('#type').val();
$.ajax({
url: 'https://dns.google/resolve',
data: {
name: domain,
type: type
},
success: function(response) {
var records = response.Answer;
var html = '<table class="table"><thead><tr><th>Record Type</th><th>Value</th></tr></thead><tbody>';
$.each(records, function(index, record) {
html += '<tr><td>' + record.type + '</td><td>' + record.data + '</td></tr>';
});
html += '</tbody></table>';
$('#result').html(html);
}
});
}
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/B6y 著作权归作者所有。请勿转载和采集!