Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
119 views
in Technique[技术] by (71.8m points)

javascript - Calling PHP file using AJAX

I'm trying to call a php file using the $.ajax() function in jQuery however it is not working. The following code is run when a button on the page is clicked:

if($error === false) {
        alert($error);
        $.ajax({
            url: '/new-user.php',
            type: 'POST',
            data: {
                name: $('#name').val(),
                email: $('#name').val(),
                password: $('#name').val()
            }
        });

This is my form:

<form onClick="return false;" class="reg-form">

    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="name">First Name</label>
                <input type="text" id="name" class="form-control" autofocus="autofocus">
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="email">Email Address</label>
                <input type="text" id="email" class="form-control">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <label for="password">Password</label>
                <input type="password" id="password" class="form-control">
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label for="password-confirm">Confirm Password</label>
                <input type="password" id="password-confirm" class="form-control">
            </div>
        </div>
    </div>

    <button class="btn trans reg-btn">Sign Up</button>

    <div class="reg-msg">
        <span id="password-error-msg">Passwords do not match.</span>
    </div>

</form>

I have set the form's onClick to return false so that the form does not reload the page when submitted so that the jQuery can run.

Any help is greatly appreciated.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

The main reason why people use forms is so that you can define an

action (in your case a php script),

method (GET or POST) and a

submit button that captures all the information in the form and automatically sends it to the server.

This is nice when you have 20-30 inputs or you are handling multiple file inputs. In your case you are handling the data retrieval in your ajax function, you have no submit button, action or method defined so you could make things a lot easier by not using a form at all....

    $.ajax({
        url: '/new-user.php',
        type: 'POST',
        dataType: "json",
        data: {
            name: $('#name').val(),
            email: $('#email').val(),
            password: $('#password').val()
        }
    }).done(function(data){
            alert(JSON.stringify(data));
    });

I've left out the formatting divs for simplicity...

<input type="text" id="name" class="form-control" autofocus="autofocus">
<input type="text" id="email" class="form-control">
<input type="password" id="password" class="form-control">

The above code will grab the data in your inputs, send it to the php script and output the data that is sent back from your php script in the alert.

And most importantly your page will NOT refresh!


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...