Почему ajax возвращает error

Before anything , I have searched for a solution for my issue here in SOF and in the internet but I didn’t found the useful solution for my code :/

I write a code for getting products prices in an e-commerce laravel project depends on a product size ,
just for testing I want to (alert) the size id , and that is my js code where I use ajax :

edited

  $(document).ready(function(){
   $("#selSize").change(function(){
     var idSize = $(this).val();
     var arr = idSize.split('/');
     var productID = arr[0];
     var sizeID = arr[1];
     //alert(productID);
     $.ajax({
        type:'get',
        data: {sizeID:sizeID},
        dataType: 'application/json' ,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        contentType: "application/json; charset=utf-8",
        url:productID+'/get-products-price',
        success:function(resp){
            alert(resp);
        },error: function(xhr, status, error) {
            var err = eval("(" + xhr.responseText + ")");
            alert(err.Message);
          }
     });
   });
});

and that is my html code where I browsing the product possible sizes :

<h3 class="my-3">Product Sizes</h3>
   @if(count($sizes) > 0)
   <select id="selSize" name="size"style="width:180px;margin-bottom:40px;height:30px;">
         <option>Select size</option>
         @foreach($sizes as $size)
             <option value="{{$product->id}}/{{$size->id}}">({{$size->width}},
                                            {{$size->height}},
                                            {{$size->length}}, 
                                            {{$size->thickness}})
                                           (cm)
             </option>
         @endforeach
    </select>
    @endif

and that is my controller function that I used :

public function getProductPrice(Request $request)
{
    $data = $request->all();
    echo "<pre>"; print_r($data); die;
}

and that where I do the routing :

Route::get('{id}/get-products-price' , 'SizesController@getProductPrice');

finally the alert it shown to me says : (localhost says undefined) , mean return the error alert from ajax , why ?

the url shown in network console is (http://localhost/AishaStore/public/details/11/get-products-price?sizeID=2)

I hope I found the solution by your help

Before anything , I have searched for a solution for my issue here in SOF and in the internet but I didn’t found the useful solution for my code :/

I write a code for getting products prices in an e-commerce laravel project depends on a product size ,
just for testing I want to (alert) the size id , and that is my js code where I use ajax :

edited

  $(document).ready(function(){
   $("#selSize").change(function(){
     var idSize = $(this).val();
     var arr = idSize.split('/');
     var productID = arr[0];
     var sizeID = arr[1];
     //alert(productID);
     $.ajax({
        type:'get',
        data: {sizeID:sizeID},
        dataType: 'application/json' ,
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        contentType: "application/json; charset=utf-8",
        url:productID+'/get-products-price',
        success:function(resp){
            alert(resp);
        },error: function(xhr, status, error) {
            var err = eval("(" + xhr.responseText + ")");
            alert(err.Message);
          }
     });
   });
});

and that is my html code where I browsing the product possible sizes :

<h3 class="my-3">Product Sizes</h3>
   @if(count($sizes) > 0)
   <select id="selSize" name="size"style="width:180px;margin-bottom:40px;height:30px;">
         <option>Select size</option>
         @foreach($sizes as $size)
             <option value="{{$product->id}}/{{$size->id}}">({{$size->width}},
                                            {{$size->height}},
                                            {{$size->length}}, 
                                            {{$size->thickness}})
                                           (cm)
             </option>
         @endforeach
    </select>
    @endif

and that is my controller function that I used :

public function getProductPrice(Request $request)
{
    $data = $request->all();
    echo "<pre>"; print_r($data); die;
}

and that where I do the routing :

Route::get('{id}/get-products-price' , 'SizesController@getProductPrice');

finally the alert it shown to me says : (localhost says undefined) , mean return the error alert from ajax , why ?

the url shown in network console is (http://localhost/AishaStore/public/details/11/get-products-price?sizeID=2)

I hope I found the solution by your help

This bug is really frustrating me and I am hoping the fine folks here at SO can help at least give me some clues as to what to look for. I have set up an order tracking system using ajax and it works with like 95% of the requests. However some are running the function that is in the error response.. for example :

function trackIt(){
    $j("#result").html(" ");
    $j("resultTwo").html(" ");
    var ordervalue = $j('#order').val();
    if ((ordervalue.length == 9) || (ordervalue.length == 5)) {
        $j.ajax({
            type: 'GET',
            url: '<?php echo Mage::getBaseUrl('web') ?>/index/trackOrder',
            data: 'increment_id='+ ordervalue,
            dataType: 'json',
            beforeSend: function() {
                $j('#result').html('<img src="loading.gif" alt="" />');
            },
            success: tracker,
            error : function (xhr, status, error) {
                wtf();
            }
        });
    } else { return false; };
};

I can see in firebug that the json data is returning as it should but for a couple of tracking numbers it is running the wtf function?! WTF? What else can I look for? Why is it considering some requests an error? What can I look for? Is there something wrong with how I am making these requests? Let me know if you need more information or anything to help you help me.

Thanks in advance for any help.. all I want for Christmas is for this damn thing to work!

Edit :

Here is an example of the JSON response that is not being returned.

{"Debug":"3","Status":"Closed","Date":"2011-12-15T22:53:09","Description": "<div class="orderProduct">Sector 9 J-Bay Bamboo Longboard  - Color: ASSORTED, Size: 10</div><div class="orderProduct">Kahuna Haka Cruiser Skateboard  - Color: ASSORTED, Size: ONE SIZE</div><div class="orderProduct">Santa Cruz Primo Pintail 9.9" Longboard Cruiser  - Color: ASSORTED, Size: ONE SIZE","ProcessorId":"0","Sku": "16389400070018<br>17748800070018<br>18777606960012","Method":"Free Shipping","ShippingCo":"UPS Ground","Track":""}

Here is an example of one that is being returned.

{"Debug":"1","Status":"Closed","Date":"2011-12-15T22:33:32","Description": "<div class="orderProduct">Supra Dixon Black Canvas Shoe  - Color: BLACK, Size: 12","ProcessorId":"0","Sku": "16086200010046","Method":"Ship To Store - In Store Pickup","ShippingCo":"Ship To Store - In Store Pickup","Track":"1Z68W0376038395"}

One obvious difference is that debug value which unfortunately I have no idea what that means.

This bug is really frustrating me and I am hoping the fine folks here at SO can help at least give me some clues as to what to look for. I have set up an order tracking system using ajax and it works with like 95% of the requests. However some are running the function that is in the error response.. for example :

function trackIt(){
    $j("#result").html(" ");
    $j("resultTwo").html(" ");
    var ordervalue = $j('#order').val();
    if ((ordervalue.length == 9) || (ordervalue.length == 5)) {
        $j.ajax({
            type: 'GET',
            url: '<?php echo Mage::getBaseUrl('web') ?>/index/trackOrder',
            data: 'increment_id='+ ordervalue,
            dataType: 'json',
            beforeSend: function() {
                $j('#result').html('<img src="loading.gif" alt="" />');
            },
            success: tracker,
            error : function (xhr, status, error) {
                wtf();
            }
        });
    } else { return false; };
};

I can see in firebug that the json data is returning as it should but for a couple of tracking numbers it is running the wtf function?! WTF? What else can I look for? Why is it considering some requests an error? What can I look for? Is there something wrong with how I am making these requests? Let me know if you need more information or anything to help you help me.

Thanks in advance for any help.. all I want for Christmas is for this damn thing to work!

Edit :

Here is an example of the JSON response that is not being returned.

{"Debug":"3","Status":"Closed","Date":"2011-12-15T22:53:09","Description": "<div class="orderProduct">Sector 9 J-Bay Bamboo Longboard  - Color: ASSORTED, Size: 10</div><div class="orderProduct">Kahuna Haka Cruiser Skateboard  - Color: ASSORTED, Size: ONE SIZE</div><div class="orderProduct">Santa Cruz Primo Pintail 9.9" Longboard Cruiser  - Color: ASSORTED, Size: ONE SIZE","ProcessorId":"0","Sku": "16389400070018<br>17748800070018<br>18777606960012","Method":"Free Shipping","ShippingCo":"UPS Ground","Track":""}

Here is an example of one that is being returned.

{"Debug":"1","Status":"Closed","Date":"2011-12-15T22:33:32","Description": "<div class="orderProduct">Supra Dixon Black Canvas Shoe  - Color: BLACK, Size: 12","ProcessorId":"0","Sku": "16086200010046","Method":"Ship To Store - In Store Pickup","ShippingCo":"Ship To Store - In Store Pickup","Track":"1Z68W0376038395"}

One obvious difference is that debug value which unfortunately I have no idea what that means.

Функция $.ajax() лежит в основе всех Ajax запросов отправляемых при помощи jQuery. Зачастую нет необходимости вызывать эту функцию, так как есть несколько альтернатив более высого уровня, такие как $.get() и .load(), которые более простые в использовании. Если требуется менее распространенные варианты , через, $.ajax() Вы можете более гибко скофигурировать запрос.

В простейшем виде, функция $.ajax() может быть вызвана без аргументов:

Важно: настройки по умолчанию могут быть установлены при помощи функции $.ajaxSetup().

Этот пример, не используюя никаких параметров, загружает содержимое текущей страницы, но ничего не делает с результатом. Для использования результата, Вы можете реализовать одну из функция обратного вызова.

Объект jqXHR

Объект jQuery XMLHttpRequest (jqXHR) возвращается функцией $.ajax() начиная с jQuery 1.5 является надстройкой над нативным объектом XMLHttpRequest. Например, он содержит свойства responseText и responseXML, а также метод getResponseHeader(). Когда траспортом используемым для запрос является что то иное, а не XMLHttpRequest (например, тэг script tag для JSONP запроса) объект jqXHR эмулирует функционал нативного XHR там где это возможно.

Начиная с jQuery 1.5.1, объект jqXHR также содержит метод overrideMimeType() (он был доступен в jQuery 1.4.x, но был временно удален в версии jQuery 1.5). Метод .overrideMimeType() может быть использован в обработчике beforeSend(), например, для изменения поля заголовка content-type:

  url: "http://fiddle.jshell.net/favicon.png",
  beforeSend: function( xhr ) {
    xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
    if ( console && console.log ) {
      console.log( "Sample of data:", data.slice( 0, 100 ) );

Объект jqXHR возвращаемый методом $.ajax() в версии jQuery 1.5 реализует интерфейс Promise, дающий ему все свойства, методы и поведение Promise. Эти методы принимают один или несколько аргументов, которые вызываются при завершении запроса инициированного при помощи $.ajax(). Это позволяет назначать несколько обработчиков на один запрос и даже назначать обработчики после того как запрос может быть завершен. (Если запрос уже выполнен, то обработчики вызовутся немедленно). Доступные методы Promise в объекте jqXHR:

• jqXHR.done(function( data, textStatus, jqXHR ) {});

  Альтернатива создания обработчика success, подробнее смотрите на deferred.done().

• jqXHR.fail(function( jqXHR, textStatus, errorThrown ) {});

  Альтернатива создания обработчика error, метод .fail() заменяет устаревший метод .error(). Смотрите подробнее deferred.fail().

• jqXHR.always(function( data|jqXHR, textStatus, jqXHR|errorThrown ) { }); (добавлен в версии jQuery 1.6)

  Альтернатива создания обработчика complete, метод .always() заменяет устаревший метод .complete().

  В ответ на успешный запрос, аргументы функции те же самые что и у .done(): data, textStatus и объект jqXHR. Для ошибочных зпросов аргументы те же самые что и у .fail(): объект jqXHR, textStatus и errorThrown. Смотрите подробнее deferred.always().

• jqXHR.then(function( data, textStatus, jqXHR ) {}, function( jqXHR, textStatus, errorThrown ) {});

  Включает в себя функциональность методов .done() и .fail(), что упрощает (начиная с jQuery 1.8) проще управлять объектом Promise. Смотрите подробнее deferred.then().

Внимание: обработчики jqXHR.success(), jqXHR.error() и jqXHR.complete() будут удалены в jQuery 3.0. Вы можете использовать jqXHR.done(), jqXHR.fail() и jqXHR.always() соответственно.

// Назначаем обработчики сразу после выполнения запроса
// и сохраняем объект jqXHR для этого запроса
var jqxhr = $.ajax( "example.php" )
// Установим другой обработчик выполнения запроса
jqxhr.always(function() {
  alert( "second complete" );

Ссылка this внутри всех обработчиков указывает на объект заданный в параметре context переданные в аргумент settings метода $.ajax; если context не указан, то this указывает на объект settings.

Для обеспечения обратной совместимости с кодом XMLHttpRequest, в объекте jqXHR предоставляет следующие свойства и методы:

• readyState
• status
• statusText
• responseXML и/или responseText когда запрос вернул xml и/или text, соответственно
• setRequestHeader(name, value) те заголовки что отходят от стандарта, заменят старое значение на новое, а не конкатенируют старое и новые значения
• getAllResponseHeaders()
• getResponseHeader()
• statusCode()
• abort()

Механизма onreadystatechange не предусмотрено, так как done, fail, always и statusCode охватывает все возможные требования.

Очередность функций обратного вызова

Все параметры beforeSend, error, dataFilter, success и complete принимают в качестве значений функции обратного вызова, которые вызываются в соотвествующие моменты времени.

С версии jQuery 1.5 функции fail и done, и, начиная с jQuery 1.6, always вызовутся в первую очередь, первыми из упрвляемой очереди, что позволяет более чем один обработчик для каждого элемента очереди. Смотрите отложенные методы, которые реализуют внутренности обработчиков метода $.ajax().

Функции обратного вызова предоставленные методом $.ajax() следующие:

1. beforeSend вызывается всегда; принимает jqXHR объект и объект settings как параметры.
2. error вызывается, если запрос выполняется с ошибкой. Принимает объект jqXHR, строку со статусом ошибки и объект исключения если применимо. Некоторые встроенные ошибки обеспечивают строку качестве объекта исключения: «abort», «timeout», «No Transport».
3. dataFilter вызывается немедленно при успешном получении данных ответа. Принимает в качестве параметров возвращенные данные и знчение параметра dataType и должен вернуть (возможно измененные данные) для передачи далее в обработчик success.
4. success вызывается если запрос выполнен успешно. Принимает данные ответа, строку содержащую код успеха и объект jqXHR.
5. Promise обработчик — .done(), .fail(), .always() и .then() — выполняются, в том порядке в котором зарегистрированы.
6. complete вызывается когда запрос закончен, независимо от успеха или неудачи выполнения запроса. Принимает объект jqXHR, отформатированную строку со статусом успеха или ошибки.

Типы данных

Различные типы ответа на вызов $.ajax() подвергаются различным видам предварительной обработки перед передачей обработчика success. Тип предварительной подготовки зависит от указанного в ответе поля заголовка Content-Type, но может быть явно указан при помощи опции dataType. Если параметр dataType задан, то поле заголовка Content-Type будет проигнорирован.

Возможны следующие типы данных: text, html, xml, json, jsonp и script.

Если указан text или html, никакой предварительной обработки не происходит. Данные просто передаются в обработчик success и доступны через свойство responseText объекта jqXHR.

Если указан xml, то ответ парсится при помощи jQuery.parseXML перед передачей в XMLDocument в обработчик success. XML документ доступен через свойство responseXML объекта jqXHR.

Если указан json, то ответ парсится при помощи jQuery.parseJSON перед передачей в объект для обработчика success. Полученный JSON объект доступен через свойство responseJSON объекта jqXHR.

Если указан script, то $.ajax() выполнит JavaScript код который будет принят от сервере перед передачей этого кода как строки в обработчик success.

Если указан jsonp, $.ajax() автоматически добавит в строку URL запроса параметр (по умолчанию) callback=?. Параметры jsonp и jsonpCallback из объекта settings переданных в метод $.ajax() могут быть использованы для указания имени URL-параметра и имени JSONP функции обратного вызова соответственно. Сервер должен вернуть корректный Javascript который будет переда в обработчик JSONP. $.ajax() выполнит возвращенный JavaScript код, вызвыв функцию JSONP по ее имени, перед передачей JSON объекта в обработчик success.

Отправка данных на сервер

По умолчанию, Ajax запросы отправляются при помощи GET HTTP метода. Если POST метод требуется, то метод следует указать в настройках при помощи параметра type. Этот параметр влияет на то как данные из параметра data будут отправлены на сервер. Данные POST запроса всегда будут переданы на сервере в UTF-8 кодировкепо стандарту W3C XMLHTTPRequest.

Параметр data может содержать строку произвольной формы, например сериализованная форма key1=value1&key2=value2 или Javascript объект {key1: 'value1', key2: 'value2'}. Если используется последний вариант, то данные будут преобразованы в строку при помощи метода jQuery.param() перед их отправкой. Эта обработка может быть отключена при помощи указания значения false в параметре processData. Обработка может быть нежелательной, если Вы хотите отправить на сервере XML документ, в этом случае измените параметр contentType с application/x-www-form-urlencoded на более подходящий MIME тип.

Расширенные настройки

Параметр global предотвращает выполнение обработчиков зарегистрированных при помощи методов .ajaxSend(), .ajaxError() и подобных методов. Это может быть полезно, например, для скрытия индикатора загрузки реализованного при помощи .ajaxSend() если запросы выполняются часто и быстро. С кросс-доменными и JSONP запросами, параметр global автоматически устанавливается в значение false.

Если сервер выполняет HTTP аутентификацию перед предоствлением ответа, то имя пользователя и пароль должны быть отправлены при помощи параметров username и password options.

Ajax запросы ограничены по времени, так что ошибки могут быть перехвачены и обработаны, чтобы обеспечить наилучшее взаимодействие с пользователем. Таймауты запроса обычно либо установлены по умолчанию, либо установлены глобально при помощи $.ajaxSetup() вместо того чтобы указывать параметр timeout для каждого отдельного запроса.

По умолчанию, запросы всегда совершаются, но браузер может предоставить ответ из своего кэша. Для запрета на использования кэшированных результатов установите значение параметра cache в false. Для того чтобы вызвать запрос с отчетом об изменении ресурса со времени последнего запроса установите значение параметра ifModified в true.

Параметр scriptCharset разрешает кодировку которая будет явно использована в запросах использующих тэг <script> (то есть тип данных script или jsonp). Это применимо в случае если удаленный скрипт и Ваша текущая страница используют разные кодировки.

Первая буква в слове Ajax означает «асинхронный», что означает что операция происходит параллельно и порядок ее выполнения не гарантируется. Параметр async метода $.ajax() по умолчанию равен true, что указывает что выполнение кода может быть продолжено после совершения запроса. Установка этого параметра в false (и следовательно, не делая Ваш вывод более асинхронным) настоятельно не рекомендуется, так как это может привести к тому что браузер перестанет отвечать на запросы.

Метод $.ajax() вернет объект XMLHttpRequest который и создает. Обычно jQuery обрабатывает создание этого объекта внутри, но можно указать при помощи параметра xhr функция которая переопределит поведение по умолчанию. Возвращаемый объект обычно может быть отброшен, но должен обеспечивать интерфейс низкого уровня для манипуляции и управления запросом. В частности, вызов .abort() на этом объекте должен будет остановить запрос до его завершения.

Расширение Ajax

Начиная с jQuery 1.5, реализация Ajax в jQuery включает предварительные фильтры, транспорты и преобразователи, которые позволят Вам очень гибко настроить Ajax запросы под любые нужды.

Использование преобразований

$.ajax() преобразователи поддерживают трансформацию одних типов данных другие. Однако, если Вы хотите трансформировать пользовательский тип данных в известный тип данных (например json), Вы должны добавить добавить соответствие между Content-Type ответа и фактическим типом данных, используя параметр contents:

    mycustomtype: /mycustomtype/
    "mycustomtype json": function( result ) {

Этот дополнительный объект необходим, потому что Content-Types ответа и типы данных никогда не имеют однозначного соответствия между собой (отсюда и регулярное выражение).

Для преобразования из поддерживаемого типа (например text или json) в пользовательский тип данных и обратно, используйте другой сквозной преобразователь:

    mycustomtype: /mycustomtype/
    "text mycustomtype": true,
    "mycustomtype json": function( result ) {

Пример выше позволяет перейти из text в mycustomtype и затем из mycustomtype в json.