ajax表单提交->从php接收响应

Question

I've been reading multiple threads about similar cases but even now I'm still unable to do it correctly.

What I want to do Basically, ie I have form which allows user to change his login (simply query to database). PHP script looks like that:

if(isset($_POST['login'])) {
        $doEdit = $user->editData("login", $_POST['login']);
        if($doEdit) {
            $result = displayInfobox('success', 'Good!');
        } else {
            $result = displayInfobox('warning', 'Bad!');
        }   
    } else {
        $error = 'Bad!';
        echo $error;
    }

displayInfobox is just a div with class ie success and content - Good!.

Right now I would like to send this form by AJAX and display $result without reloading page.

HTML:

<form id="changeLogin" method="post" class="form-inline" action="usercp.php?action=editLogin">
        <label for="login">Login:</label><br />
        <div class="form-group ">
            <input type="text" class="form-control" name="login" id="login" required>
            <input type="submit" value="Zmień"  class="btn btn-primary">
        </div>
    </form>

And finnally - my jquery/ajax:

$("#changeLogin").submit(function(e) {

  var postData = $(this).serializeArray();
  var formURL = $(this).attr("action");
  $.ajax({
    url: formURL,
    type: "POST",
    data: postData,
    success: function(result) {
      alert(result);
    },
    error: function(response) {}
  });
  e.preventDefault();
});

$("#changeLogin").submit();

If I leave "success" blank, it works -> form is submitted by ajax, login changed, but I do not see the result message. Otherwise whole page get reloaded. Also, when I hit F5 form is being submited once again (even in Ajax).

Answer 1

I cant add comments because i do not have enough reputation but...

You should delete the last line with $("#changeLogin").submit();

And then in your php script file you should echo the result so you can get this result in ajax request. After that in your success method you have to read the result and (for example) append it somewhere to show the success or error box

Answer 2

我认为您可以使用普通按钮代替提交按钮，仅onclick可以是一个ajax请求，不应该提交表单，祝您好运。