使用jquery的ajax，一种是form提交，一种是button直接提交。
1. 引用
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="/js/ajax-form.js"></script>
2.js脚本ajax-form.js
jQuery(function($) {
$('form[data-async]').on('submit', function(event) {
var $form = $(this);
var $target = $($form.attr('data-target'));
$.ajax({
type: $form.attr('method'),
url: $form.attr('action'),
data: $form.serialize(),
success: function(data, status) {
$target.html(data);
}
});
event.preventDefault();
});
$("#subbtn").click(function() {
var $btn = $(this);
var params = $btn.attr('data');
var $target = $($btn.attr('data-target'));
$.ajax({
type: $btn.attr('method'),
url: $btn.attr('action'),
data: params,
success: function(data){
$target.html(data);
}
});
});
});
第一个函数为data-async的form的提交响应，第二个函数为id为subbtn的button响应。
3.HTML内容
form
<form class="form-horizontal well" data-async data-target="#routeinfo" action="/cgi-bin/searchconf.py" method="POST">
<div class="form-group">
<label>按vrf名搜索路由</label>
<INPUT TYPE=hidden NAME=searchtype VALUE="sroute">
<input type="text" name="key" class="form-control" placeholder="">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<div class="panel-body" id="routeinfo"></div>
button
<button id="subbtn" data="searchtype=sroute&key=jmlw.spjk.gdapn" data-target="#routeinfo" action="/cgi-bin/searchconf.py" method="POST">搜索</button>
<div class="panel-body" id="routeinfo"></div>
