javascript - AJAX success callback alert not working? - Stack Overflow

admin管理员组

文章数量:1298182

I've checked out various other posts on SO, but I don't seem to see the problem, and was hoping if you could help me shed some light on this issue. Basically, I'm doing a microblogging appliation and inserting a tweet when a button is clicked, which calls the jQuery ajax function. Here's the respective code:

home.js

This is the ajax jquery call

function sendTweet(single_tweet) {
var tweet_text = $("#pose").val();

tweet_text = tweet_text.replace(/'/g, "'");
tweet_text = tweet_text.replace(/"/g, """); 

var postData = {
    author      :   $("#username").text().split("@")[1],    // be careful of the @! - @username
    tweet       :   tweet_text,
    date        :   getTimeNow()
};

$.ajax({
    type        :   'POST',
    url         :   '../php/tweet.php', 
    data        :   postData,
    dataType    :   'JSON',
    success     :   function(data) {
        alert(data.status);
    }
})
}

The ajax call works successfully, and the tweet is inserted, but I can't get the alert call to fireback under the success parameter. I tried something basic like alert('abc'); but it didn't work either.

tweet.php

This is just a wrapper, looks like this:

<?php
include 'db_functions.php';

$author = $_POST['author'];
$tweet  = $_POST['tweet'];
$date   = $_POST['date'];

insert_tweet($author, $tweet, $date);

$data = array();
$data['status'] = 'success';
echo json_encode($data);
?>

This just inserts the tweet into the database, and I wanted to try sending simple JSON formatted data back, but data.status didn't work on the success callback.

db_functions.php

This is where the insert_tweet function is in, and it looks like this:

function insert_tweet($author, $tweet, $date) {
global $link;
$author_ID = get_user_ID($author);
$query =    "INSERT INTO tweets (`Author ID`, `Tweet`, `Date`) 
            VALUES ('{$author_ID}', '{$tweet}', '{$date}')";
$result = mysqli_query($link, $query);
}

I've tested it, and I'm pretty sure this runs fine. I doubt this is the cause of the problem, but if it is, I'm all ears. I've tested the $link, which is defined in another file included in the top of the db_functions.php file, and this works.

Would appreciate some advice regarding this, thanks!

UPDATE

Changed success to plete, and it works. However, the data object seems a bit odd:

data.status pops up 200 in the alert

I tried changing the JSON array element name to data['success'] in PHP, and accessed it in the front end with data.success, and it outputted this in the alert box:

function () {
            if ( list ) {
                // First, we save the current length
                var start = list.length;
                (function add( args ) {
                    jQuery.each( args, function( _, arg ) {
                        var type = jQuery.type( arg );
                        if ( type === "function" ) {
                            if ( !options.unique || !self.has( arg ) ) {
                                list.push( arg );
                            }
                        } else if ( arg && arg.length && type !== "string" ) {
                            // Inspect recursively
                            add( arg );
                        }
                    });
                })( arguments );
                // Do we need to add the callbacks to the
                // current firing batch?
                if ( firing ) {
                    firingLength = list.length;
                // With memory, if we're not firing then
                // we should call right away
                } else if ( memory ) {
                    firingStart = start;…

What does this mean??

UPDATE 2

Okay, I don't know if this helps, but I've printed the console log from Chrome's inspector, and if I'm not mistaken, the JSON data is sent back just fine. Here's the entire log:

Object {readyState: 4, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function…}
abort: function ( statusText ) {
always: function () {
plete: function () {
arguments: null
caller: null
length: 0
name: ""
prototype: Object
__proto__: function Empty() {}
<function scope>
done: function () {
error: function () {
fail: function () {
getAllResponseHeaders: function () {
getResponseHeader: function ( key ) {
overrideMimeType: function ( type ) {
pipe: function ( /* fnDone, fnFail, fnProgress */ ) {
progress: function () {
promise: function ( obj ) {
readyState: 4
responseJSON: Object
    status_success: "success"
    __proto__: Object
    responseText: "{"status_success":"success"}"
    status_success: "success"
__proto__: Object
responseText: "{"status_success":"success"}"
setRequestHeader: function ( name, value ) {
state: function () {
status: 200
statusCode: function ( map ) {
statusText: "OK"
success: function () {
then: function ( /* fnDone, fnFail, fnProgress */ ) {
__proto__: Object
__defineGetter__: function __defineGetter__() { [native code] }
__defineSetter__: function __defineSetter__() { [native code] }
__lookupGetter__: function __lookupGetter__() { [native code] }
__lookupSetter__: function __lookupSetter__() { [native code] }
constructor: function Object() { [native code] }
hasOwnProperty: function hasOwnProperty() { [native code] }
isPrototypeOf: function isPrototypeOf() { [native code] }
propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
toLocaleString: function toLocaleString() { [native code] }
toString: function toString() { [native code] }
valueOf: function valueOf() { [native code] }
get __proto__: function __proto__() { [native code] }
set __proto__: function __proto__() { [native code] }

UPDATE 3

Console error scrn shot

I've checked out various other posts on SO, but I don't seem to see the problem, and was hoping if you could help me shed some light on this issue. Basically, I'm doing a microblogging appliation and inserting a tweet when a button is clicked, which calls the jQuery ajax function. Here's the respective code:

home.js

This is the ajax jquery call

function sendTweet(single_tweet) {
var tweet_text = $("#pose").val();

tweet_text = tweet_text.replace(/'/g, "'");
tweet_text = tweet_text.replace(/"/g, """); 

var postData = {
    author      :   $("#username").text().split("@")[1],    // be careful of the @! - @username
    tweet       :   tweet_text,
    date        :   getTimeNow()
};

$.ajax({
    type        :   'POST',
    url         :   '../php/tweet.php', 
    data        :   postData,
    dataType    :   'JSON',
    success     :   function(data) {
        alert(data.status);
    }
})
}

The ajax call works successfully, and the tweet is inserted, but I can't get the alert call to fireback under the success parameter. I tried something basic like alert('abc'); but it didn't work either.

tweet.php

This is just a wrapper, looks like this:

<?php
include 'db_functions.php';

$author = $_POST['author'];
$tweet  = $_POST['tweet'];
$date   = $_POST['date'];

insert_tweet($author, $tweet, $date);

$data = array();
$data['status'] = 'success';
echo json_encode($data);
?>

This just inserts the tweet into the database, and I wanted to try sending simple JSON formatted data back, but data.status didn't work on the success callback.

db_functions.php

This is where the insert_tweet function is in, and it looks like this:

function insert_tweet($author, $tweet, $date) {
global $link;
$author_ID = get_user_ID($author);
$query =    "INSERT INTO tweets (`Author ID`, `Tweet`, `Date`) 
            VALUES ('{$author_ID}', '{$tweet}', '{$date}')";
$result = mysqli_query($link, $query);
}

I've tested it, and I'm pretty sure this runs fine. I doubt this is the cause of the problem, but if it is, I'm all ears. I've tested the $link, which is defined in another file included in the top of the db_functions.php file, and this works.

Would appreciate some advice regarding this, thanks!

UPDATE

Changed success to plete, and it works. However, the data object seems a bit odd:

data.status pops up 200 in the alert

I tried changing the JSON array element name to data['success'] in PHP, and accessed it in the front end with data.success, and it outputted this in the alert box:

function () {
            if ( list ) {
                // First, we save the current length
                var start = list.length;
                (function add( args ) {
                    jQuery.each( args, function( _, arg ) {
                        var type = jQuery.type( arg );
                        if ( type === "function" ) {
                            if ( !options.unique || !self.has( arg ) ) {
                                list.push( arg );
                            }
                        } else if ( arg && arg.length && type !== "string" ) {
                            // Inspect recursively
                            add( arg );
                        }
                    });
                })( arguments );
                // Do we need to add the callbacks to the
                // current firing batch?
                if ( firing ) {
                    firingLength = list.length;
                // With memory, if we're not firing then
                // we should call right away
                } else if ( memory ) {
                    firingStart = start;…

What does this mean??

UPDATE 2

Okay, I don't know if this helps, but I've printed the console log from Chrome's inspector, and if I'm not mistaken, the JSON data is sent back just fine. Here's the entire log:

Object {readyState: 4, getResponseHeader: function, getAllResponseHeaders: function, setRequestHeader: function, overrideMimeType: function…}
abort: function ( statusText ) {
always: function () {
plete: function () {
arguments: null
caller: null
length: 0
name: ""
prototype: Object
__proto__: function Empty() {}
<function scope>
done: function () {
error: function () {
fail: function () {
getAllResponseHeaders: function () {
getResponseHeader: function ( key ) {
overrideMimeType: function ( type ) {
pipe: function ( /* fnDone, fnFail, fnProgress */ ) {
progress: function () {
promise: function ( obj ) {
readyState: 4
responseJSON: Object
    status_success: "success"
    __proto__: Object
    responseText: "{"status_success":"success"}"
    status_success: "success"
__proto__: Object
responseText: "{"status_success":"success"}"
setRequestHeader: function ( name, value ) {
state: function () {
status: 200
statusCode: function ( map ) {
statusText: "OK"
success: function () {
then: function ( /* fnDone, fnFail, fnProgress */ ) {
__proto__: Object
__defineGetter__: function __defineGetter__() { [native code] }
__defineSetter__: function __defineSetter__() { [native code] }
__lookupGetter__: function __lookupGetter__() { [native code] }
__lookupSetter__: function __lookupSetter__() { [native code] }
constructor: function Object() { [native code] }
hasOwnProperty: function hasOwnProperty() { [native code] }
isPrototypeOf: function isPrototypeOf() { [native code] }
propertyIsEnumerable: function propertyIsEnumerable() { [native code] }
toLocaleString: function toLocaleString() { [native code] }
toString: function toString() { [native code] }
valueOf: function valueOf() { [native code] }
get __proto__: function __proto__() { [native code] }
set __proto__: function __proto__() { [native code] }

UPDATE 3

Console error scrn shot

• javascript
• php
• jquery
• ajax
• twitter

Share Improve this question Follow edited Jun 23, 2014 at 8:17 Code Apprentice asked Jun 23, 2014 at 7:34 Code ApprenticeCode Apprentice 52222 gold badges77 silver badges2020 bronze badges 3

• Are there error logs? When you use the developer tools in the browser, what is seen ing back from the server? – user1932079 Commented Jun 23, 2014 at 7:37
• Check in error block. – Butani Vijay Commented Jun 23, 2014 at 7:38
• @JeremyMiller I'm sorry, I'm not too familiar with error logging - do you mean something like console.log(data)? – Code Apprentice Commented Jun 23, 2014 at 7:40

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Try this:

$.ajax({
    type        :   'POST',
    url         :   '../php/tweet.php', 
    data        :   postData,
    dataType    :   'json',
    plete     :   function(data) {
        alert(data.status);
    }
})

Try the below code. I've added content type while sending data to server, parseJson method in success method,

$.ajax({
         url: "../php/tweet.php",
         data: '{"author": "' + $("#username").text().split("@")[1] + '","tweet": "' + tweet_text + '","date": "' + getTimeNow() + '"}',
         dataType: "json",
         contentType: "application/json; charset=utf-8",
         type: "POST",
         success: function (data) {
             var myResult = $.parseJSON(data);
         },
         error: function (err) {
                alert(err)
         }
      });

if you have any clarification you can go through jquery ajax document

Note:it's helpful for you if you add callback for error method

Try to set content type in your PHP file:

header( 'Content-Type: application/json' );

Then echo your data:

echo json_encode( $data );

And stop the script:

exit;

Hope it helps!

try to change your input type from "submit" into "button". i hope it works.

本文标签： javascriptAJAX success callback alert not workingStack Overflow