Ajax doesn't work anymore on the prod server

Question

I'm a web developper in a small company that decided to make its selling website in PHP5/Laravel 4.2 instead of Prestashop or anything else. The site is hosted by another company, and we don't have the liberty to make anything we'd want on the server.

I made 6 monthes ago a script in AJAX that let the user know without refreshing how high would his shipping fee and taxes cost. We're in Europe in the border of France and Switzerland, so it's really a necessity to have this script. It worked really great, until this week when I wanted to implement another script, and found out that this script didn't work anymore (for how long, I don't know).

The JS :

function shippingFee()
{
        var idCountry, weight;
        weight= document.getElementById('weight').value;
        idCountry = document.getElementById("country").value;
        $.post('ajax/shippingFee',               
            {idCountry: idCountry, weight: weight},          
            function(data){
                obj = JSON.parse(data);
            $('#fee).html(obj.fee); 
            $('#total').html(obj.total);  
            $('#sub').html(obj.sub);  
            $('#promo').html(obj.promo);         
            });                     
};

Here is my route :

Route::post('ajax/shippingFee', 'AjaxController@shippingFee');

Here's my function (not everything, just the final result) on the AjaxController:

public function shippingFee(){

//Test values, only for this example
    $fee = 12;
    $total = 24;
    $sub = 3;
    $promo = 0;

    $res = ['fee'=>$fee, 'total'=>$total, 'sub'=>$sub, 'promo'=>$promo];
    echo json_encode($res); 
}

When I click on the button that activate the function, I have this error :

SyntaxError : unexpected token in json at position 0

And if I click on the source, I have my JSON :

{"fee": 12, "total":24, "sub":3, "promo":0}

Again, the code worked perfectly six monthes ago, and still works on localhost. Do you have any idea on what's happening ?

Thanks a lot.

Open your `Developer tools (F12)` and see on which line the error is caused. Look at the network tab to see if it is server side. — GuyT, Oct 12 '16 at 07:09
What is the URL of the page, AJAX request is coming from? You may try replacing `ajax/shippingFee` with `/ajax/shippingFee` in JS — Oleg, Oct 12 '16 at 07:14
@GuyT : the error is caused when I'm making the `obj = JSON.parse(data)`. I tried using `data['"fee"]` or `data[0].fee`, I've nothing. But when I'm making a console.log(data), I have `{"fee": 12, "total":24, "sub":3, "promo":0}`, so I don't know what to do. @Curious : If the URL is `/ajax/shippingFee` it just doesn't point. I have the result of my function, so it goes wherever it's supposed to go, I guess. — Lyzvaleska, Oct 12 '16 at 07:49
I think your data is already object. I think there is no need to parse it. Are you using json header in PHP file? — munjal, Oct 12 '16 at 07:53
@Thanya I guess munjal is correct. Set a breakpoint at `obj = JSON.parse(data);` and check the type of `data`. — GuyT, Oct 12 '16 at 08:38
I'll give it a try. The problem is that I only see the bug on the prod server, and I can't reasonably make test on the prod server at office hours (people tend to buy when they're awake, weirdly). I'll try to make tests after 8PM this evening. And next time I'm in a company, I'll be sure I have a test server. — Lyzvaleska, Oct 13 '16 at 08:17

score 0 · Answer 1 · answered Oct 12 '16 at 07:09

0

specify the dataType in Post request, also check the response result in Developer tools that will give you clear idea. don't forget to call exit(0) method once you echo result that will fix the issue if you using any framework

PHP Exit method

answered Oct 12 '16 at 07:09

abhirathore2006

3,317
1
25
29

I tried putting `dataType: "JSON"` in my $.post(), but when I'm doing it the function doesn't process at all. I'll give you the full error log in anytime, I'm doing a full backup right now ^^' – Lyzvaleska Oct 12 '16 at 07:53
did you tried after adding exit() method after echo in php ? – abhirathore2006 Oct 12 '16 at 11:17

score 0 · Accepted Answer · edited May 23 '17 at 10:27

Okay, I succeeded. I don't know why, but my json_encode wasn't sending a satisfying json. I tried to change the structure of my function with this :

function shippingFee()
{
        var idCountry, weight;
        weight= document.getElementById('weight').value;
        idCountry = document.getElementById("country").value;

            $.ajax({
            url: "ajax/shippingFee",
            type: "Post",
            data: {'idCountry':idCountry, 'weight':weight},
            traditional: true,
            success: function (data) {

                data = JSON.stringify(eval('('+data+')'));
                var obj= JSON.parse(data);
                $('#fee).html(obj.fee); 
                $('#total').html(obj.total);  
                $('#sub').html(obj.sub);  
                $('#promo').html(obj.promo); 
                }
            });                     
};

Thus, with the data = JSON.stringify(eval('('+data+')')); I say that this is a JSON. And my code is working like a charm. I found this solution by watching this post : Convert object string to JSON

I tried to put the dataType:"JSON" before the success, but when I did it returned an error. With contentType:"application/json" I had an error 500.

Thanks to the people who answered me :)

Ajax doesn't work anymore on the prod server

2 Answers2