Question

我正在尝试使用.ajax提交表单而不刷新页面。但目前，它只是刷新页面，甚至没有达到我的脚本。

我正在调用这个函数。传递的字符串是我希望运行的脚本的URL（并将post vars提交到）

<form onsubmit="submitForm('login-register/submit-registration.php')" method="POST">

函数submitForm()看起来像这样：

function submitForm(url){
    var url = 'actions/'+url;
    console.log(url);
    $.ajax({
        type: 'post',
        url: url,
        data: $('form').serialize(),
        success: function () {
            $('#success-message').fadeIn("fast");
        }
        });
}

我正确地看到我的console.logs，所以它必须到达脚本，但它没有将vars发布到脚本（甚至根本没有运行脚本，它出现了）。

Answer 1

您需要onsubmit处理程序才能返回false以防止默认浏览器页面重新加载：

<form onsubmit="return submitForm('login-register/submit-registration.php')" method="POST">

在JS中：

function submitForm(url){
    var url = 'actions/'+url;
    $.ajax({
        type: 'post',
        url: url,
        data: $('form').serialize(),
        success: function () {
            $('#success-message').fadeIn("fast");
        }
    });
    return false;
}

随着进一步的改进，您可以摆脱内联事件处理程序，转而采用不显眼的事件绑定模型。例如：

<form action="login-register/submit-registration.php" method="POST">

然后您不再需要submitForm功能，只需绑定onsubmit事件：

$('form').submit(function(e) {
    e.preventDefault();
    $.ajax({
        type: 'post',
        url: 'actions/' + this.action,
        data: $(this).serialize(),
        success: function () {
            $('#success-message').fadeIn("fast");
        }
    });
});

Answer 2

HTML

<form id="myForm" >

JS

   var myForm= $('#myForm');
     myForm.submit(function (ev) {
            $.ajax({
                type: 'post',
                url: 'login-register/submit-registration.php',
                data: myForm.serialize(),
                success: function (data) {
                   //something
                }
            });

            ev.preventDefault();
        });

我认为这是更清洁的解决方案，因为你会有更清晰的HTML

使用jQuery提交带有post vars的表单

2 个答案: