Why does my ajax success callback-function not work as expected?

Question

I code this ajax request but I don't know why the code in the success method doesn't work

Even though in the networks in chrome browser appear state: 200ok

this is ajax code:

$("#noti_filter").click(function(){
  //first add item into cart
  var item_id = 'test';
  $.ajax({
    method:"POST",
    //contentType:"application/json",
    url:"../html/notifies.php",
    data:{product_id:item_id},
    dataType: "json",
    success:function(data,state) {
      console.log(data);
      console.log(state);
      alert('ajax success');
    }
  });
});

the problem is that alert or console Not to mention the others code

  success:function(data,state)
  {
    console.log(data);
    console.log(state);
    alert('ajax success');

  }

Look in the console. Add an error handler – mplungjan Mar 21 '21 at 08:22 — mplungjan, Mar 21 '21 at 08:22
Make sure you set your console filter to show log messages. – Sebastian Simon Mar 21 '21 at 08:26 — Sebastian Simon, Mar 21 '21 at 08:26

score 2 · Accepted Answer · answered Mar 21 '21 at 09:37

From the ajax events docs:

success (Local Event)

This event is only called if the request was successful (no errors from the server, no errors with the data).

Since your server responded with 200 OK that means we can route out problems with the server and are left with errors with the data.

From the ajax docs (only the relevant parts):

dataType

The type of data that you're expecting back from the server.

The available types (and the result passed as the first argument to your success callback) are:

"json": Evaluates the response as JSON and returns a JavaScript object. ... The JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown. As of jQuery 1.9, an empty response is also rejected; the server should return a response of null or {} instead. (See json.org for more information on proper JSON formatting.)

So most likely the data returned by the server is being rejected by ajax in which case a parse error should be thrown.

This would be an example of how to implement an error handler:

$("#noti_filter").click(function(){
    //first add item into cart
    var item_id = 'test';

    $.ajax({
       method:"POST",
       //contentType:"application/json",
       url:"../html/notifies.php",
       data:{product_id:item_id},
       dataType: "json",
       success: function(data,state) {
           console.log(data);
           console.log(state);
           alert('ajax success');
       },
       error: function(err) {
           console.log(err.responseText);   // <-- printing error message to console
       }
    });
});

its work i change the datatype to html but there another problem has shown up in the result.php page where i recieve the posted data this is the page content '.$data.'";} ?> it doesn't echo the data; — yahya haddad, Mar 21 '21 at 11:44
@yahyahaddad If you change your datatype back to `json`, you will receive it on the server as `$_POST['data']` and then you have to `json_decode()` it like this: `$data = json_decode($_POST['data'])`. Check [here](https://www.w3schools.com/Php/php_json.asp) for examples of how to decode json on in PHP. — Ivan86, Mar 21 '21 at 18:57

score 1 · Answer 2 · answered Mar 21 '21 at 08:43

1

You defined the dataType as json. The dataType is the type of data that you're expecting back from the server. Does your server responds json?

I assume the result of your 200-ok-server-request is probably not in json format, so the parsing fails and your success-callback is not called. You can catch the error with error callback function. After that you know the exact reason.

answered Mar 21 '21 at 08:43

wuarmin

3,274
3
18
31

ok how i can make the result in json format – yahya haddad Mar 21 '21 at 13:11
1

https://stackoverflow.com/questions/4064444/returning-json-from-a-php-script – wuarmin Mar 21 '21 at 13:44

Why does my ajax success callback-function not work as expected?

2 Answers2