位置250的JSON中的意外標記

Question

我是JavaScript新手。我有一張表格，根據城市和郵政編碼查找醫生。然而，對於城市下降，有一個特定的城市呈現出錯誤。我不知道爲什麼這個特定的城市，它會拋出JSON錯誤。我能想到的唯一情況是價值被傳遞的時候，可能會有一個隱藏的價值。

以下是代碼：

<div class="form-group"> 
     <SELECT name="proCity" class="form-control" id="city" placeholder="City" ng-model="searchParam.City"> 
        <option disabled="disabled" selected="selected" value="">City</option> 
         <option value=""></option> 
         <cfoutput query="cityFind"> 
         <option value=#trim(city)#>#trim(city)#</option> 
        </cfoutput> 
        </select> 

     <!---<select class="form-control" id="city" ng-model="searchParam.City"><option disabled="disabled" selected="selected" value="">City</option><option ng-repeat="c in Cities">{{c.City}}</option> </select>---> 
     </div> 

    $scope.GetCityList = function(){ 
     try{ 
      $http.get("/includes/remote/ReturnCityList.cfm") 
       .then(function(response){ 
        $scope.Cities = response.data.Cities; 
       }) 
     } 
     catch(err){} 
    } 

以下是ColdFusion的地方檢索包含城市表：

<cfoutput> 
<cftry> 
    <cfquery name="Cities" datasource="W"> 
     declare @tmpTable table (col1 nvarchar(255)) 

     insert into @tmpTable 
     select distinct city 
     from providerWeb_Multiple 
     where isnull(city,'') <> '' 
     order by city 

     declare @tmp nvarchar(max) = '' 

     select @tmp = RTRIM(LTRIM(@tmp)) 
       + ',{"value":"' + col1 + '"}' 
     from @tmpTable 

     select '{"Cities":[' + stuff(@tmp,1,1,'') + ']}' as col 
    </cfquery> 
    <cfoutput> 
     #Cities.col# 
    </cfoutput> 
    <cfcatch type="Any"> 
     <!---<cfoutput>#cfcatch.Message#<br /> 
     #cfcatch.Detail#</cfoutput>---> 
     <cfoutput>An error has been detected. Please contact us with this problem. Thanks!</cfoutput> 
    </cfcatch> 
</cftry> 

任何幫助將不勝感激。

UPDATE

好了，多了幾分測試後，沒有傳遞任何特殊字符。我相信這與我創建的可能是問題，但再次下js文件的事，我沒有看到它：

(
function(){ 
    var $scope, $location; 
    var indexApp = angular.module('indexApp',['ui.bootstrap']); 

    indexApp.controller('IndexController',function($scope,$http,$location,anchorSmoothScroll){ 
     $scope.Lang = 'initVal'; 
     $scope.ShowResults = false; 
     $scope.ShowDesc = true; 
     $scope.NoResults = false; 
     $scope.currentPage = 1; 
     $scope.maxPageNumbersToShow = 10; 
     $scope.formModel = {}; 
     $scope.searchMode = 0; 
     $scope.miles = [{'value':'5'},{'value':'10'},{'value':'15'},{'value':'20' }]; 
     $scope.Specialties = [{'value':'Family practice'},{'value':'General practice'},{'value':'Internal medicine'},{'value':'Pediatrics'}]; 
     $scope.Gender = [{'value':'Male'},{'value':'Female'}]; 
     $scope.Languages = {}; 
     $scope.Cities = {}; 
     $scope.searchParam = {}; 
     $("input").removeAttr('disabled'); 

     $scope.searchParam.Distance = $scope.miles[0]; 

     $scope.GetCurrentZip = function(){ 
      try{ 
       var lon, lat; 
       // console.log('starting geoposition code.'); 
       if("geolocation" in navigator){ 
        window.navigator.geolocation.getCurrentPosition(function(pos){ 
         lat = pos.coords.latitude.toFixed(3); 
         lon = pos.coords.longitude.toFixed(3); 
         // console.log(lat + ' ' + lon); 
         $http.get("/includes/remote/ReturnCurrentZipcode.cfm?Lat=" + lat + "&Lon=" + lon) 
         .then(function(response){ 
          $scope.searchParam.Zip = response.data; 
         }) 
        }) 
       } 
       else{ console.log('No geolocation'); } 
      } 
      catch(err) { console.log(err.message); } 
     } 

     $scope.GetCityList = function(){ 
      try{ 
       $http.get("/includes/remote/ReturnCityList.cfm") 
        .then(function(response){ 
         $scope.Cities = response.data.Cities; 
        }) 
      } 
      catch(err){} 
     } 

     $scope.GetLangList = function(){ 
      try{ 
       $http.get("/includes/remote/ReturnLangList.cfm") 
        .then(function(response){ 
         $scope.Languages = response.data.Languages; 
        }) 
      } 
      catch(err){} 
     } 

     $scope.SearchProvider = function(searchParam){ 
      try{ 
       $scope.searchMode = 1; 
       var queryString=''; 
       if($scope.formModel && $scope.formModel !== searchParam){ 
        $scope.resultsCount = 0; 
        currentPage = 1; 
       } 
       if(searchParam){ 
        $scope.formModel = searchParam; 
        for(var param in searchParam){ 
         if(searchParam.hasOwnProperty(param)){ 
          var paramValue = searchParam[param].value ? searchParam[param].value.trim() : searchParam[param].trim(); 
          if (paramValue.length > 0) 
           queryString += param + '=' + paramValue + '&'; 
         } 
        } 
       } 
       console.log(queryString); 
       queryString= '?' + queryString + 'currentpage=' + $scope.currentPage; 

       $http.get("/includes/remote/ReturnProvidersList.cfm" + queryString) 
       .then(function(response){ 
        $scope.providers = response.data.provider; 
        $scope.resultsCount = response.data.rowCount; 
        if (!$scope.providers){ 
          $scope.NoResults = true; 
          $scope.ShowResults = false; 
          $scope.ShowDesc = false; 
         } 
        else{ 
          $scope.NoResults = false; 
          $scope.ShowResults = true; 
          $scope.ShowDesc = false; 
         } 
       }) 
      } 
      catch(err){ alert('No response.: ' + err.message); } 
     } 

     $scope.$watchGroup(['currentPage'], function(){ 
      try{ 
       if($scope.searchMode == 1){ 
        $scope.SearchProvider($scope.formModel); 
        } 
      } 
      catch(err){} 
     }); 


     $scope.GetCityList(); 
     $scope.GetLangList(); 
     $scope.GetCurrentZip(); 

     $scope.gotoElement = function (eID){ 
      //http://jsfiddle.net/brettdewoody/y65G5/ 
       // set the location.hash to the id of 
       // the element you wish to scroll to. 

      //$location.hash('bottom'); 

       // call $anchorScroll() 
      var browserWidth = screen.availWidth; 
      if (browserWidth < 768) 
       anchorSmoothScroll.scrollTo(eID); 
     }; 

    }); 

    indexApp.service('anchorSmoothScroll', function(){ 
     this.scrollTo = function(eID) { 

      // This scrolling function 
      // is from http://www.itnewb.com/tutorial/Creating-the-Smooth-Scroll-Effect-with-JavaScript 

      var startY = currentYPosition(); 
      var stopY = elmYPosition(eID); 
      var distance = stopY > startY ? stopY - startY : startY - stopY; 
      if (distance < 100) { 
       scrollTo(0, stopY); return; 
      } 
      var speed = Math.round(distance/100); 
      if (speed >= 20) speed = 20; 
      var step = Math.round(distance/25); 
      var leapY = stopY > startY ? startY + step : startY - step; 
      var timer = 0; 
      if (stopY > startY) { 
       for (var i=startY; i<stopY; i+=step) { 
        setTimeout("window.scrollTo(0, "+leapY+")", timer * speed); 
        leapY += step; if (leapY > stopY) leapY = stopY; timer++; 
       } return; 
      } 
      for (var i=startY; i>stopY; i-=step) { 
       setTimeout("window.scrollTo(0, "+leapY+")", timer * speed); 
       leapY -= step; if (leapY < stopY) leapY = stopY; timer++; 
      } 

      function currentYPosition() { 
       // Firefox, Chrome, Opera, Safari 
       if (self.pageYOffset) return self.pageYOffset; 
       // Internet Explorer 6 - standards mode 
       if (document.documentElement && document.documentElement.scrollTop) 
        return document.documentElement.scrollTop; 
       // Internet Explorer 6, 7 and 8 
       if (document.body.scrollTop) return document.body.scrollTop; 
       return 0; 
      } 

      function elmYPosition(eID) { 
       var elm = document.getElementById(eID); 
       var y = elm.offsetTop; 
       var node = elm; 
       while (node.offsetParent && node.offsetParent != document.body) { 
        node = node.offsetParent; 
        y += node.offsetTop; 
       } return y; 
      } 

     }; 

    }); 

    indexApp.directive('allowPattern',[allowPatternDirective]); 
    indexApp.directive('popPopup',[describePopup]); 
    indexApp.directive('pop', function pop ($tooltip, $timeout) { 
    var tooltip = $tooltip('pop', 'pop', 'event'); 
    var compile = angular.copy(tooltip.compile); 
    tooltip.compile = function (element, attrs) {  
     var first = true; 
     attrs.$observe('popShow', function (val) { 
     if (JSON.parse(!first || val || false)) { 
      $timeout(function(){ 
       element.triggerHandler('event'); 
      }); 
      } 
      first = false; 
     }); 
     return compile(element, attrs); 
     }; 
     return tooltip; 
    }); 

    indexApp.filter('PhoneNumber', function(){ 
    return function(phoneNumber){ 
     var dash = '-'; 
     var openParen = '('; 
     var closeParen = ') '; 
     if(phoneNumber){ 
      var pn = phoneNumber; 
      pn = [pn.slice(0, 6), dash, pn.slice(6)].join(''); 
      pn = openParen + [pn.slice(0, 3), closeParen, pn.slice(3)].join(''); 
      return pn; 
      } 
     return phoneNumber; 
     } 
    }); 

    indexApp.filter('Zip', function(){ 
    return function(zipcode){ 
     var dash = '-'; 
     if(zipcode && zipcode.length > 5){ 
      var zc = zipcode; 
      zc = [zc.slice(0, 5), dash, zc.slice(5)].join(''); 
      return zc; 
      } 
     return zipcode; 
     } 
    }); 

    function allowPatternDirective(){ 
     return{ 
      restrict: "A", 
      compile: function(tElement, tAttrs){ 
       return function(scope, element, attrs){ 
        element.bind("keypress", function(event){ 
         var keyCode = event.which || event.keyCode; 
         var keyCodeChar = String.fromCharCode(keyCode); 

         if(!keyCodeChar.match(new RegExp(attrs.allowPattern, "i"))){ 
          event.preventDefault(); 
          return false; 
         } 
        }); 
       } 
      } 
     } 
    } 

    function describePopup(){ 
     return { 
      restrict: 'EA', 
      replace: true, 
      scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' }, 
      templateUrl: 'template/popover/popover.html' 
      }; 
     } 
})(); 
(function($) { 
    // @todo Document this. 
    $.extend($,{ placeholder: { 
     browser_supported: function() { 
     return this._supported !== undefined ? 
      this._supported : 
      (this._supported = !!('placeholder' in $('<input type="text">')[0])); 
     }, 
     shim: function(opts) { 
     var config = { 
      color: '#888', 
      cls: 'placeholder', 
      selector: 'input[placeholder], textarea[placeholder]' 
     }; 
     $.extend(config,opts); 
     return !this.browser_supported() && $(config.selector)._placeholder_shim(config); 
     } 
    }}); 

    $.extend($.fn,{ 
    _placeholder_shim: function(config) { 
     function calcPositionCss(target) 
     { 
     var op = $(target).offsetParent().offset(); 
     var ot = $(target).offset(); 

     return { 
      top: ot.top - op.top, 
      left: ot.left - op.left, 
      width: $(target).width() 
     }; 
     } 
     function adjustToResizing(label) { 
     var $target = label.data('target'); 
     if(typeof $target !== "undefined") { 
      label.css(calcPositionCss($target)); 
      $(window).one("resize", function() { adjustToResizing(label); }); 
     } 
     } 
     return this.each(function() { 
     var $this = $(this); 

     if($this.is(':visible')) { 

      if($this.data('placeholder')) { 
      var $ol = $this.data('placeholder'); 
      $ol.css(calcPositionCss($this)); 
      return true; 
      } 

      var possible_line_height = {}; 
      if(!$this.is('textarea') && $this.css('height') != 'auto') { 
      possible_line_height = { lineHeight: $this.css('height'), whiteSpace: 'nowrap' }; 
      } 

      var isBorderBox = ($this.css('box-sizing') === 'border-box'); 
      var isTextarea = $this.is('textarea'); 

      var ol = $('<label />') 
      .text($this.attr('placeholder')) 
      .addClass(config.cls) 
      .css($.extend({ 
       position:'absolute', 
       display: 'inline', 
       'float':'none', 
       overflow:'hidden', 
       textAlign: 'left', 
       color: config.color, 
       cursor: 'text', 
       paddingTop: !isTextarea && isBorderBox ? '0' : $this.css('padding-top'), 
       paddingRight: $this.css('padding-right'), 
       paddingBottom: !isTextarea && isBorderBox ? '0' : $this.css('padding-bottom'), 
       paddingLeft: $this.css('padding-left'), 
       fontSize: $this.css('font-size'), 
       fontFamily: $this.css('font-family'), 
       fontStyle: $this.css('font-style'), 
       fontWeight: $this.css('font-weight'), 
       textTransform: $this.css('text-transform'), 
       backgroundColor: 'transparent', 
       zIndex: 99, 
      }, possible_line_height)) 
      .css(calcPositionCss(this)) 
      .attr('for', this.id) 
      .data('target',$this) 
      .click(function(){ 
       if (!$(this).data('target').is(':disabled')) { 
        $(this).data('target').focus(); 
       } 
      }) 
      .insertBefore(this); 
      $this 
       .data('placeholder', ol) 
       .on('keydown', function() { 
        ol.hide(); 
       }) 
       .on('blur change', function() { 
        ol[$this.val().length ? 'hide' : 'show'](); 
       }) 
       .triggerHandler('blur'); 
      $(window).one("resize", function() { adjustToResizing(ol); }); 
     } 
     }); 
    } 
    }); 
})(jQuery); 

jQuery(document).add(window).bind('ready load', function() { 
    if (jQuery.placeholder) { 
    jQuery.placeholder.shim(); 
    } 
}); 

UPDATE 正如@Leigh的建議，我已經盡了全力專注於主要問題並選擇要生成結果的代碼。

下面的代碼是什麼是用於顯示城市：

<div class="form-group"> 
     <SELECT name="proCity" class="form-control" id="city" placeholder="City" ng-model="searchParam.City"> 
        <option disabled="disabled" selected="selected" value="">City</option> 
         <option value=""></option> 
         <cfoutput query="cityFind"> 
         <option value=#trim(city)#>#trim(city)#</option> 
        </cfoutput> 
        </select> 

     <!---<select class="form-control" id="city" ng-model="searchParam.City"><option disabled="disabled" selected="selected" value="">City</option><option ng-repeat="c in Cities">{{c.City}}</option> </select>---> 
     </div> 

下面是我使用的值傳遞到數據庫，然後檢索結果中的js文件：

function(){ 
    var $scope, $location; 
    var indexApp = angular.module('indexApp',['ui.bootstrap']); 

    indexApp.controller('IndexController',function($scope,$http,$location,anchorSmoothScroll){ 
     $scope.Lang = 'initVal'; 
     $scope.ShowResults = false; 
     $scope.ShowDesc = true; 
     $scope.NoResults = false; 
     $scope.currentPage = 1; 
     $scope.maxPageNumbersToShow = 10; 
     $scope.formModel = {}; 
     $scope.searchMode = 0; 
     $scope.miles = [{'value':'5'},{'value':'10'},{'value':'15'},{'value':'20' }]; 
     $scope.Specialties = [{'value':'Family practice'},{'value':'General practice'},{'value':'Internal medicine'},{'value':'Pediatrics'}]; 
     $scope.Gender = [{'value':'Male'},{'value':'Female'}]; 
     $scope.Languages = {}; 
     $scope.Cities = {}; 
     $scope.searchParam = {}; 
     $("input").removeAttr('disabled'); 
$scope.GetCityList = function(){ 
      try{ 
       $http.get("/includes/remote/ReturnCityList.cfm") 
        .then(function(response){ 
         $scope.Cities = response.data.Cities; 
        }) 
      } 
      catch(err){} 
     } 

以下是ReturnCityList.cfm文件：

<cftry> 
    <cfquery name="Cities" datasource="Wa"> 
     declare @tmpTable table (col1 nvarchar(255)) 

     insert into @tmpTable 
     select distinct city 
     from providerWeb_Multiple 
     where isnull(city,'') <> '' 
     order by city 

     declare @tmp nvarchar(max) = '' 

     select @tmp = RTRIM(LTRIM(@tmp)) 
       + ',{"value":"' + col1 + '"}' 
     from @tmpTable 

     select '{"Cities":[' + stuff(@tmp,1,1,'') + ']}' as col 
    </cfquery> 
    <cfoutput> 
     #Cities.col# 
    </cfoutput> 
    <cfcatch type="Any"> 
     <!---<cfoutput>#cfcatch.Message#<br /> 
     #cfcatch.Detail#</cfoutput>---> 
     <cfoutput>An error has been detected. Please contact us with this problem. Thanks!</cfoutput> 
    </cfcatch> 
</cftry> 

Answer 1

也許您的JSON海峽ING包含一些無效的Unicode字符

當這個測試完成後，我發現下面的ASCII控制 字符是有問題的，當爲內聯JSON交付：

8232 - 行分隔符

8233 - 段分隔符

https://www.bennadel.com/blog/2576-testing-which-ascii-characters-break-json-javascript-object-notation-parsing.htm