ajax表单提交

HTML代码:

<form id="formCity" action="/SiteMap/Search" method="get" onsubmit="return false">
    <div class="form-group">
        <div style="padding: 0; line-height: 30px; float: left; font-size: 16px; ">
            快速查找:
        </div>
        <div class="col-md-3">
            <input id="city_search" name="search" class="form-control" data-provide="typeahead" type="text" value="" required />
        </div>
    </div>
    <input class="btn btn_main_sm" value="搜索" type="submit" onclick="findCity('formCity')">
</form>

Js代码:

<script type="text/javascript" src="/Resource/Scripts/jquery.validate.js"></script>
<script type="text/javascript" src="/Resource/Scripts/jquery.validate.Extend.js"></script>
<script type="text/javascript">
    function findCity(formId) {
        var form = $("#" + formId);
        var valid = form.valid();
        var method = form.attr("method");
        var action = form.attr("action");
        var btnSubmit = form.find("[type=submit]");
        var btnText = btnSubmit.val();
        if (valid) {
            $.ajax({
                type: method,
                url: action,
                beforeSend: function () {
                    btnSubmit.addClass('disabled').text("正在查询...");
                },
                data: form.serialize(),
                success: function (data) {
                    if (data.IsSuccess) {
                        location.href = data.Message;
                    }
                    else {
                        alert(data.Message);
                    }
                    btnSubmit.removeClass("disabled").text(btnText);
                }
               , error: function (XMLHttpRequest, textStatus, errorThrown) {
                   alert("NetworkError:" + XMLHttpRequest.status + " " + XMLHttpRequest.statusText)
                   btnSubmit.removeClass("disabled").text(btnText);
               }
            })
        }

    }

 

posted @ 2016-08-16 10:42  黄者之风  阅读(139)  评论(0编辑  收藏  举报