jquery下的ajax应用-form和button触发

使用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>