Ajax未达到登录表单的“成功”

Question

The success part of the ajax function is never reached. I've spent hours on it, still no success. The code has been stripped of virtually everything necessary just to try and remove any possible problems but it still doesn't work.

Below is the stripped out code that I'm trying to get to work. Thanks for any help.

Ajax:

function validLogin(){

    var url = "loginProcessAjax.php";

    $.ajax({
        type: 'POST',
        url: url,

        beforeSend: function() {
            //
            alert("sdfs");
        },

        success: function(html) {

            alert("success");
            alert(html.getElementsByTagName("worked")[0].firstChild.nodeValue);
        },

        error: function( error ) {
            console.log(error);
        }
    });
}

PHP:

 <?php
 header("Content-type: text/xml");
 echo "<?xml version='1.0' encoding='ISO-8859-1'?>";
 echo "<worked>";
 echo "success";
 echo "</worked>";
 ?>

HTML:

<form method="post" action="" id="ourLoginFormID_JS">
                    <div class="ourContactFormElement2">
                        <label for="username">Username:</label>
                        <input type="text" id="username"  name="username" autocomplete="off" class="required" value="<?php if(isset($_POST['username'])) echo htmlentities($_POST['username']); ?>"  />
                    </div>

                    <div class="ourContactFormElement2">
                        <label for="password">Password:</label>
                        <input type="password" id="password" name="password" autocomplete="off" class="required"/>
                    </div>

                    <div class="ourContactFormElement2">
                        <label> &nbsp; </label>
                        <input type="submit" name="loginButton" id="loginButton" value="Login!" onclick="validLogin()"/>
                    </div>

                    <div id="statusLogin"></div>
                </form>

In beforeSend, the alert box with xml doesn't get generated. the other one does so I know it's at least calling the function.

Answer 1

You need to cancel the form submission from happening

change

onclick="validLogin()"/>

to

onclick="validLogin(); return false;"/>

it would be better to use onsubmit on the form and not a click event on the button. It would be even better to not use inline event handlers.

Answer 2

Spokey solved this in chat. Legend.

by using $.ajax({
    type: 'POST',
    url: 'loginProcessAjax.php',
    beforeSend: function() {
        alert("sent");
    },
    success: function(html) {
        alert(html) 
    },
    error: function( x, status, error ) {
        alert(x.status + status + error);
    }
});

we were able to get an error code which then led to

jQuery Ajax - Status Code 0?

which then in turn led to a couple of things. Firstly as espascarello pointed out the form was not returning false so it was resending the data. With that amended the url was not found which was odd so using an absolute path solve it.

Thank you everyone for your help