jquery cfml ajax

Question

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

$(".alphabet").hover(function () {
  $.ajax({ type: "POST", 
  url: "cfc/basic.cfc?method=CountUsersByLetter&returnformat=json", 
  data: "nbw=" + $(this.target).val(), 
  datatype: "html",
  success: function(usercount){
  alert(usercount);
  },
  error: function (xhr, textStatus, errorThrown){ 
   // show error 
   //alert(errorThrown);
   console.log('errorThrown');
    } 
  }); 
    $(this).append($("<span>" + usercount +"</span>"));
     }, 
  function () {
    $(this).find("span:last").remove();
  }
);

<cffunction name="CountUsersByLetter" output="no" returntype="query" access="remote">
 <cfargument name="NBW" required="false" type="string" default="A" hint="name begins with">
 <cfset var qResults = "">
  <cfquery name="qResults" datasource="#request.dsn#">
   select count(id) as usercount from Temp_Duplicate_Individuals_CC
   WHERE left(lastname,1) = <cfqueryparam value="#arguments.NBW#" />
  </cfquery>
 <cfreturn #qResults#>
</cffunction>

Answer 1

Вы должны понимать, что ajax по умолчанию асинхронный характер, поэтому вам нужно подождать, пока сервер ответит, прежде чем использовать usercount, который доступен только внутри обработчика успеха.Либо сделайте синхронный вызов, установив async на false, либо дождитесь ответа сервера.

Переместите свой код в обработчик успеха

$(".alphabet").hover(function () {
  $.ajax({ type: "POST", 
     url: "cfc/basic.cfc?method=CountUsersByLetter&returnformat=json", 
     data: "nbw=" + $(this.target).val(), 
     datatype: "html",
     success: function(usercount){
       //alert(usercount);
       $(this).append($("<span>" + usercount +"</span>"));
     },
     error: function (xhr, textStatus, errorThrown){ 
      // show error 
      //alert(errorThrown);
      console.log('errorThrown');
    } 
  }); 

  }, 
  function () {
    $(this).find("span:last").remove();
  }
);

Я бы не советовал делать синхронныйвызов, потому что это заставляет всю страницу ждать, и иногда браузер полностью зависает, если серверу требуется время для ответа.

Answer 2

В коде есть много вещей, которые можно использовать для настройки.

Я бы добавил эту строку кода прямо перед вызовом .ajax ():

$.ajaxSetup({ timeout: 5000, cache: false }); // this is needed or ie will cache the ajax responses!

@ Ответ Джейсона Таблера близок. RecordCount запроса с использованием COUNT () всегда будет возвращать значение 1 (один). Я бы изменил утверждение cfreturn так:

<cfreturn qResults.usercount />

Знаки фунта не нужны в cfreturn, и это будет возвращать значение вместо объекта запроса.

Вызов ajax не должен быть "POST". «POST» обычно используется для отправки на страницу действия формы. Это должно быть "GET".

Я всегда использую Firebug для проверки формата данных, возвращаемых в случае успеха: function, а затем добавляю код для его отображения. Поскольку возвращаемое значение было изменено выше, оно должно стать гораздо более простым в использовании объектом json.

Answer 3

Почему бы тебе не попробовать cfreturn qResults.recordCount? Вы возвращаете весь объект запроса прямо сейчас.

Answer 4

Измените функцию успеха, как показано ниже. Поскольку функция возвращает весь запрос не только count, то вы получите объект запроса в аргументе usercount not only count. Также вы получите текстовую строку, которая может потребоваться для преобразования в объект JSON с помощью функции eval ().

EDIT: Вот полный функциональный код. Я рассматривал только проблему с функцией успеха, но добавление SPAN, которое вы написали вне успеха, также вызывало проблему.

    $(".alphabet").hover(function () {
              var _$this = $(this);
              var usercount = 0;
              $.ajax({ type: "POST", 
              url: "scribble.cfc?method=CountUsersByLetter&returnformat=json", 
              data: "nbw=" + $(this.target).val(), 
              datatype: "html",
              success: function(res){
                 usercount = eval("(" + res + ")").DATA[0][0];
                 _$this.append($("<span> (" + usercount +")</span>"));
              },
              error: function (xhr, textStatus, errorThrown){ 
               console.log('errorThrown');
                } 
            }); 
        }, 
          function () {
            $(this).find("span:last").remove();
          }
        );