jQuery .submit()成功或失败触发器

ste*_*715 11 javascript jquery ruby-on-rails

.submit()用来定期在ajax上提交我的表单,但我希望用户看到表单是用旋转轮保存然后"保存!" 一旦成功.在jQuery中是否有success触发器.submit()

谢谢!

Idh*_*ian 17

试试这个:

jQuery的:

$(document).ready(function() {
    $('#form').submit(function() {
        var status = '<img class="loading" src="loading_detail.gif" alt="Loading..." />';
        $("#ajax").after(status);
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            dataType: 'json',
            success: function(json) {
                if(json.type == 'success') {
                    $('#msg').css("color","green").html(json.message);
                } else if(json.type == 'warning'){
                    $('#msg').css("color","yellow").html(json.message);
                } else if(json.type == 'error'){
                    $('#msg').css("color","red").html(json.message);
                }
                $('.loading').remove();
            }
        })
        return false;
    });
});
Run Code Online (Sandbox Code Playgroud)

HTML:

<div id="msg"></div>
<form id="form" method="post" action="action.php" >
    <input type="text" name="email" />
    <input type="submit" name="submit" value="submit" /><span id="ajax"></span>
</form>
Run Code Online (Sandbox Code Playgroud)

action.php:

<?php
if(isset($_POST['email'])){
$val = $_POST['email'];
switch ($val) {
    case 'email@site.com':
        $return = array('type'=>'success', 'message'=>'This is success message!'); break;
    case 'email':
        $return = array('type'=>'warning', 'message'=>'This is warning message!'); break;
    default:
        $return = array('type'=>'error', 'message'=>'This is error message!');
}
echo json_encode($return);
}
?>
Run Code Online (Sandbox Code Playgroud)

注意: 如果您以编程方式提交表单,则需要$('#form').submit()再次调用,但这次没有参数,因此您可以触发提交事件.


Ble*_*der 6

您可以使用手动$.post()请求而不是.submit().该$.post()有一个成功回调.

您必须填写$.post()(目标网址)和.serialize()表单元素的详细信息.