Question

我有一个表单，我通过Ajax通过POST提交。

HTML。

<button onclick="submit_ajax()" class="btn btn-primary btn-block" id="next_button" style="font-size: 24px">Create Student Account</button>

Javascript。

//For submitting form data via AJAX
function submit_ajax(){
    data = {'username':$('#username').val(),'password':$('#password').val(),'confirm':$('#confirm').val(),'fname':$('#fname').val(),'lname':$('#lname').val(),'email':$('#email').val()}

    $.ajax({
        type: 'POST',
        url: '<?php echo AJAX_DIR; ?>/create_student_account.php',
        data: data,
        dataType:'json',
        success: function() {
            //AJAX success
            $('#success_fail_icon').html('<span class="glyphicon glyphicon-ok-sign lom_big_success_icon"></span>');
            $('#success_fail_message').html('Success! Student account created for ' + data['fname'] + '.');
        },
        error: function() {
            //Ajax failure
            $('#success_fail_icon').html('<span class="glyphicon glyphicon glyphicon-remove-sign lom_big_fail_icon"></span>');
            $('#success_fail_message').html('Uh oh! Something went wrong.  Please try again, or contact us for assistance.');
        }
    });     
}

解析器文件的url绝对正确。 Chrome的检查员告诉我：XHR finished loading: POST "http://example.com/path/create_student_account.php".

Chrome检查员也说......

send    @   VM23103 jquery-3.1.1.min.js:4
ajax    @   VM23103 jquery-3.1.1.min.js:4
submit_ajax @   complete_account.php:362
onclick @   complete_account.php:256

然后，这是奇怪的部分。结果是用户被重定向回同一页面，但是url中显示的值为GET变量。 Chrome的检查员说......

Navigated to http://example.com/path/complete_account.php?username=vvv&password=vv&confirm=vv&fname=vv&lname=vv&email=

在解析器文件上，我只是想要回显$_POST['username']或$_GET['username']然后退出。我没有得到任何东西，除了被引导回到我提交的同一页面时，POST变量以某种方式附加到URL并显示给所有人看作GET变量。

如果有人有想法，我会很感激。

Answer 1

添加

e.preventDefault();
return false;

在函数末尾，并包含函数的e参数。

确保您的表单无法提交。

Answer 2

对于任何想知道的人来说，在onclick 中使用return false; 是关键。

不工作：<button onclick="submit_ajax()" class="btn btn-primary btn-block" id="next_button" style="font-size: 24px">Create Student Account</button>

工作：<button onclick="submit_ajax(); return false;" class="btn btn-primary btn-block" id="next_button" style="font-size: 24px">Create Student Account</button>

Ajax POST路由返回页面作为GET

2 个答案: