Question

我有一个需要提交的表单，并且数据通过Ajax和jQuery发送到mysql，但是当点击提交时，页面刷新并且jQuery代码没有运行。

这是我的HTML代码：

<form class="form-horizontal" role="form" action="" method="post">
        <input type="text" id="firstname" class="form-control" placeholder="Firstname" required=""></br>
        <input type="text" id="lastname" class="form-control" placeholder="Lastname" required=""></br>
        <input type="text" id="signup_email" class="form-control" placeholder="Email address" required=""></br>
        <select id="gender" class="form-control">
            <option>Select Gender</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
        </select></br>
        <input type="password" id="signup_password" class="form-control" placeholder="Password" required="">
        <input type="submit" id="signup_button" name="signup_button" class="btn btn-primary" value="Sign up">
    </form>

这是我的jQuery：

<script type="text/javascript">
    $(function()){
        $("#signup_button").click(function() {
            var firstname = $("input#firstname").val();
            var lastname = $("input#lastname").val();
            var email = $("input#signup_email").val();
            var gender = $("select#gender").val();
            var password = $("input#signup_password").val();

            var datastring = 'new=yes'+'&firstname='+firstname+'&lastname='+lastname'&email='+email+'&gender='+gender+'&password='+password;

            $.ajax({
                type:"POST";
                url:"api/signup.php";
                data: datastring;
                cache: true;
                success: function(html) {
                    $.("#alert_succes_congrats").css('display', '');
                }
            }) 
            return false;
        })
    }
</script>

谢谢。

Answer 1

您有两种方法可以解决您的问题：

第一个选项：

更改

<input type="submit" id="signup_button" name="signup_button" class="btn btn-primary" value="Sign up">

要

<input type="button" id="signup_button" name="signup_button" class="btn btn-primary" value="Sign up">

因此该按钮不会触发表单提交。

第二个选项：

在您的点击处理程序中添加event.preventDefault。

$("#signup_button").click(function(event) {
    /* Your stuff */
    event.preventDefault();
}

因此，它不会触发浏览器默认操作以形成提交按钮。

Answer 2

你的代码有很多语法错误：

$(function()){

应该是

$(function(){

另外，ajax成员应该用逗号而不是分号分隔，字符串连接也有问题。下次发生这种情况时，请检查浏览器控制台是否有任何javascript问题。

这应该有效

<script type="text/javascript">
$(function(){
    $("#signup_button").click(function() {
        var firstname = $("input#firstname").val();
        var lastname = $("input#lastname").val();
        var email = $("input#signup_email").val();
        var gender = $("select#gender").val();
        var password = $("input#signup_password").val();

        var datastring = 'new=yes'+'&firstname='+firstname+'&lastname='+lastname+'&email='+email+'&gender='+gender+'&password='+password;

        $.ajax({
            type:"POST",
            url:"api/signup.php",
            data: datastring,
            cache: true,
            success: function(html) {
                $("#alert_succes_congrats").css('display', '');
            }
        }); 
    return false;
    });
});

jQuery无法识别表单和页面刷新

2 个答案: