js-ajax提交请求

bootstrap modal form submit

<div>
    <button type="button" id="btn_add" class="btn btn-success save-btn" data-toggle="modal" data-target="#addModal">添加</button>
</div>
<div class="modal"  id="addModal" data-backdrop="static" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加用户</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="id_form_account_create">
                    <div class="form-group">
                        <label for="input_name">账号</label>
                        <input type="text" class="form-control" id="input_name" name="input_name" placeholder="输入账号">
                    </div>
                    <div class="form-group">
                        <label for="input_password">密码</label>
                        <input type="password" class="form-control" id="input_password" name="input_password" placeholder="输入密码">
                    </div>
                    <div class="form-group">
                        <label for="input_password2">确认密码</label>
                        <input type="password" class="form-control" id="input_password2" name="input_repassword" placeholder="输入确认密码">
                    </div>
                    <div class="form-group">
                        <label for="input_auth">权限</label>
                        <select class="form-control" id="input_auth" name="input_auth">
                            <option>管理</option>
                            <option>查看</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="input_comment">备注</label>
                        <textarea class="form-control" id="input_comment" rows="3" name="input_comment"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关 闭</button>
                <button type="button" class="btn btn-primary" id="btn_form_save">保 存</button>
            </div>
        </div>
    </div>
</div>

表单数据序列化

(function ($) {
    $.fn.form2Json = function () {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return JSON.stringify(o);
    };
})(jQuery);

Get请求

下面是.ajax的简写方式，一般应用场景都满足了，不行就可以用.ajax来实现

$.getJSON('/api/v1.0/trace', {startTime:'',endTime:'',devId:''})
    .done(function (data) {
        if (data['code'] == 0) {
            // has logged in
            toggleNavbarProfile(true);
        } else {
            // need login
            toggleNavbarProfile(false);
        }
        console.log("second success");
    })
    .fail(function () {
        console.log("error");
    })
    .always(function () {
        console.log("complete");
    });

POST

// profileLogout按钮ID
$(document).ready(function () {

     $("#capital_submit").click(function (e) {
        e.preventDefault();
        var jsonData = $("#form_capital").form2Json();
        console.log(jsonData)
        $.ajax({
            type: "POST",
            url: "/api/v1.0/capital",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            data: jsonData,
            success: function (result) {
                if (result["code"] == 0) {
                    alert('ok');
                } else {
                    console.log(result['msg']);
                }

            },
            error: function (xhr, resp, text) {
                console.log(xhr, resp, text);
            }
        });
    });

});

同步请求

$.ajaxSettings.async = false;
...
$.ajaxSettings.async = true;