如何在 Ajax 发布请求中保留表单字段值

Question

我正在使用一个嵌入了两个按钮的表单，第一个是检查用户名可用性，另一个是提交表单。两种按钮类型都设置为按钮。

发出 AJAX 发布请求的第一个按钮 (#btn-keywordCheck) 正在清除用户在成功警报后输入的所有表单字段，这是不可取的。后者（#btn-signup）按预期工作。有人可以帮我解决这个问题吗？

这里是 Jquery 脚本

$(document).ready(function(){

    $('#btn-keywordCheck').click(function(){
        $.ajax({
            url: "/reservedKeyCheck",
            type : 'GET',
            data : "keyword="+$("#keyword").val(),
            async : false,
            cache : false,
            contentType : "application/x-www-form-urlencoded",
            processData : false,
            success: function(output){
            alert(output.success);
            },
            error: function(jqXHR, textStatus, error){
           alert(error.message);
          }
    });
    });

    $('#btn-signup').click(function(){
        $.ajax({
            type: "POST",
            url: "/signup",
            data: $("#signupform").serialize(),
            dataType: "json",
            contentType : "application/x-www-form-urlencoded",
                success: function(output){
                alert(output.success);              
                },
                error: function(jqXHR, textStatus, error){
               alert(error.message);
              }
    });
});

});

这是 HTML 代码（我使用的是引导程序）

            <form id="signupform" class="form-horizontal" method="post"
                role="form">

                <div id="signupalert" style="display: none"
                    class="alert alert-danger">
                    <p>Error:</p>
                    <span></span>
                </div>


                <div class="form-group">
                    <label for="orgname" class="col-md-4 control-label">Organization
                        Name</label>
                    <div class="col-md-7">
                        <input type="text" class="form-control" name="orgname"
                            placeholder="Full Name">
                    </div>
                </div>

                <div class="form-group">
                    <label for="keyword" class="col-md-4 control-label">Keyword</label>
                    <div class="col-md-7">
                        <input type="text" class="form-control" name="keyword" id="keyword"
                            placeholder="Short code identifier">
                            <p></p>
                         <button id="btn-keywordCheck"class="btn btn-info">Check Availability</button>
                    </div>
                </div>

                <div class="form-group">
                    <label for="email" class="col-md-4 control-label">Email</label>
                    <div class="col-md-7">
                        <input type="text" class="form-control" name="email"
                            placeholder="Email Address">
                    </div>
                </div>

                <div class="form-group">
                    <label for="password" class="col-md-4 control-label">Set
                        Password</label>
                    <div class="col-md-7">
                        <input type="password" class="form-control" name="password"
                            placeholder="Password">
                    </div>
                </div>

                <div class="form-group">
                    <label for="confirmPassword" class="col-md-4 control-label">Confirm
                        Password</label>
                    <div class="col-md-7">
                        <input type="password" class="form-control"
                            name="confirmPassword" placeholder="Retype Password">
                    </div>
                </div>

                <div class="form-group">
                    <label for="phone" class="col-md-4 control-label">Phone
                        Number</label>
                    <div class="col-md-7">
                        <input type="text" class="form-control" name="phone"
                            placeholder="Numbers only">
                    </div>
                </div>

                <div class="form-group">
                <label for="address" class="col-md-4 control-label">Address</label>
                    <div class="col-md-7">
                        <textarea class="form-control" name="address" rows="3"
                            placeholder="Optional" id="address"></textarea>
                    </div>
                </div>


                <div class="form-group">
                    <!-- Button -->
                    <div class="col-md-offset-4 col-md-11">
                        <button id="btn-signup" type="button" class="btn btn-info">
                            <i class="icon-hand-right"></i> &nbsp Sign Up
                        </button>
                    </div>
                </div>


            </form>

谢谢！

Answer 1

只需更改您的按钮单击侦听器并添加preventDefault();。当您单击“检查可用性”按钮时，您的页面正在刷新

$('#btn-keywordCheck').click(function(){
    $.ajax({
        url: "/reservedKeyCheck",
        type : 'GET',
        data : "keyword="+$("#keyword").val(),
        async : false,
        cache : false,
        contentType : "application/x-www-form-urlencoded",
        processData : false,
        success: function(output){
        alert(output.success);
        },
        error: function(jqXHR, textStatus, error){
       alert(error.message);
      }
    preventDefault();
});

编辑：如果这不起作用，您可能需要稍微更改您的点击操作。

$('#btn-keywordCheck').on('click',function(e){
    e.preventDefault();
    $.ajax({
        url: "/reservedKeyCheck",
        type : 'GET',
        data : "keyword="+$("#keyword").val(),
        async : false,
        cache : false,
        contentType : "application/x-www-form-urlencoded",
        processData : false,
        success: function(output){
            alert(output.success);
        },
        error: function(jqXHR, textStatus, error){
            alert(error.message);
        }
    });
});