$ .ajax function（）在提交表单时不起作用

Question

I am trying to write an ajax function such that when i click the submit button, name = "Add", it will call for a php file named "addtobucketlist.php" and run the functions in it.

This is the ajax function in my file called "script.js" which is not working, and I have no idea why. (I have verified that the hideshow('loading',1); at line 2 is working.)

function Addtobucketlist(){
    hideshow('loading',1);     //line 2
    error(0);

$.ajax({
    type: "POST",
    url: "http://utourpia.me/php/addtobucketlist.php",      
    data: $('#addBucket').serialize(),
    dataType: "json",
    success: function(msg){

        if(parseInt(msg.status)==1)
        {
            //hide the form
            $('.form').fadeOut('slow');                 

            //show the success message
            $('.done').fadeIn('slow');
        }
        else if(parseInt(msg.status)==0)
        {
            error(1,msg.txt);
        }

        hideshow('loading',0);
    }
});

}

Below is my header.php

$(document).ready(function(){

        $('#addBucket').submit(function(e) {
            Addtobucketlist();
            e.preventDefault(); 
        }); 
    });

Below is my form, this is being written such that when ajax is run, the form will be hidden and div class done will be shown.

echo '<div class=form>';
echo '<form id=addBucket action="http://utourpia.me/php/addtobucketlist.php" method=post>';
echo '<input type="submit" name="add" value="Add" /><img id=loading src="../../images/loading.gif" alt="working.." />';
echo '</form>';
echo '</div>';
echo '<div class="done"><p>Added successfully! <br /></p>';
echo '</div>';

below is addtobucketlist.php:

if (isset($_POST['Add'])) 
 {
    add_to_bucket_list($location_id, $username);
    die(msg(1,"<p>Added!</p>"));
}
else
{
var_dump($location_id);
var_dump($username);
}


function msg($status,$txt)
{
return '{"status":'.$status.',"txt":"'.$txt.'"}';
}

any help would be appreciated!

Answer 1

Try using

if (!empty($_POST['Add'])) 
{

instead of isset. Add the

error: function( jqXHR, textStatus, errorThrown )

function to your ajax call to see what the error being thrown is.

You use a capital 'A' in your php _POST variable 'Add', and in your html form it is a lowercase a.

The text you're outputting from your php script might not be identified as proper json. Use the php function json_encode() on an array of output values instead.

Answer 2

action is not required as you are doing it via ajax post
remove action="http://utourpia.me/php/addtobucketlist.php

remove msg.status checks from $.ajax as it is only going to execute on success