在上一节中我们在浏览器打开了我们的案例，并输入网址点击查询得到对应的 IP ：
但是当我们点击重置时我们会发现只是输入框中的数据清空了，但是下面的 IP 地址并没有消失，所以我们要进行一些修改。打开 index.html ，在提交表单的JavaScript代码下面添加：
$('button[type=reset]').click(function() {
$('#check_result').html('');
});
这段代码就是当我们点击重置按钮时将下面的 id 属性为 check_result 的div 内容设置为空。
整个 index.html 的完整的代码如下：
<!DOCTYPE html>
<html>
<head>
<title>DNS查询</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">
<style type="text/css">
.container{
margin-top: 5em;
}
#check_result{
color: #CD46A2;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="panel-heading">
<h1>DNS查询工具</h1>
</div>
<div class="panel-body">
<form class="form-horizontal" action="/parse" method="post">
<div class="form-group">
<label for="search_dns" class="col-sm-3 control-label">查询DNS: </label>
<div class="col-sm-8">
<input type="text" class="form-control" id="search_dns" name="search_dns">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8">
<button type="submit" class="btn btn-primary">查询</button>
<button type="reset" class="btn btn-default">重置</button>
</div>
</div>
</form>
</div>
<div class="panel-footer">
<div id='check_result'></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('form').submit(function () {
var $this = $(this),
search_dns = $('#search_dns').val(),
url = $this.attr('action');
if ( search_dns ) {
$.get(url,{search_dns: search_dns}, function (res) {
var res = JSON.parse(res);
$('#check_result').html('IP 地址: ' + res.addresses);
})
}else{
alert('请输入域名!');
}
return false;
});
$('button[type=reset]').click(function() {
$('#check_result').html('');
});
});
</script>
</body>
</html>
大家可能还会遇到一个问题，当输入的是如 blog.helloarron.com、www.helloarron.com 这样的网址时才会查询到 IP ，如果输入的是如 http://blog.helloarron.com/、http://blog.helloarron.com/node/46.html 就没法查询到了，所以我们还要修改我们服务器端的代码，主要的问题就是要对提交的网址进行解析。
修改 parse_dns.js 中的 getDns() 方法如下:
function getDns(postData,callback){
var domain = '',
url_get = url.parse(postData.search_dns);
if ( url_get.host ) {
domain = url_get.host;
}else{
url_get = url.parse( 'http://' + postData.search_dns);
domain = url_get.host;
}
dns.resolve(domain, function(err, addresses){
if(!addresses){
addresses=['Not Exist !']
}
callback(domain, addresses);
});
}
到这里我们的案例就算完成了。
我已经将案例代码共享到了 GitHub 上（地址）。也可直接到 http://dns.helloarron.com/ 演示。
希望大家多多评论，我还在学习中，有什么错误的地方请大家一定要指正。
谢谢大家的支持。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。