將JSON數據導入表單域

我是Javascript和Jquery的新手，請原諒我的無知。我試圖讓我的表單字段自動填充城市和州根據郵政編碼使用JSON數據我從一個在線.asp數據庫拉。我得到了一個成功的JSON響應，可以在我的開發工具窗口中查看數據，但無法獲取它填充表單中的字段。將JSON數據導入表單域

我的代碼是：

$(function() { 

    var cache = {}; 
    var container = $("#validate"); 
    var errorDiv = container.find("div.text-error"); 

    /** Handle successful response */ 
    function handleResp(data) 
    { 
     // Check for error 
     if (data.error_msg) 
      errorDiv.text(data.error_msg); 
     else if ("City" in data) 
     { 
      // Set city and state 
      container.find("input[name='City']").val(data.City); 
      container.find("input[name='State']").val(data.State); 
     } 
    } 

    // Set up event handlers 
    container.find("input[name='zipcode']").on("keyup change", function() { 
     // Get zip code 
     var zipcode = $(this).val().substring(0, 5); 
     if (zipcode.length == 5 && /^[0-9]+$/.test(zipcode)) 
     { 
      // Clear error 
      errorDiv.empty(); 

      // Check cache 
      if (zipcode in cache) 
      { 
       handleResp(cache[zipcode]); 
      } 
      else 
      { 
       // Build url 
       var url = "http://dev.xxx.com/ASPFetchers/GetSPROCAsXML.asp?SPROC=EG_GetZipCodeInfo%20/"+(zipcode)+"/&F=JSON"; 

       // Make AJAX request 
       $.ajax({ 
        "url": url, 
        "dataType": "json" 
       }).done(function(data) { 
        handleResp(data); 

        // Store in cache 
        cache[zipcode] = data; 
       }).fail(function(data) { 
        if (data.responseText && (json = $.parseJSON(data.responseText))) 
        { 
         // Store in cache 
         cache[zipcode] = json; 

         // Check for error 
         if (json.error_msg) 
          errorDiv.text(json.error_msg); 
        } 
        else 
         errorDiv.text('Request failed.'); 
       }); 
      } 
     } 
    }).trigger("change"); 
});

我的窗體上的標記如下：

我可以在我的開發工具查看該JSON是（基於郵編06702）

<div id="validate">                    
<label>Zip Code</label>       
<input type="text" name="zipcode" id="zipcode" size =" 5" maxlength = "5" />        
<div class="text-error"></div>              

<label>City</label>       
<input type="text" name="City" id="City" />             

<label>State</label>        
<input type="text" name="State" id="State" />       
<script type="text/javascript" src="../zip/includes/zip2.js"></script>  
</div> 
</div>

：

{"items":[{"City":"WATERBURY","County":"NEW%20HAVEN","State":"CT","StateName":"CONNECTICUT","Latitude":"0.7252836","Longitude":"-1.274794"},

任何人都可以幫我解決如何從這個字符串中獲取信息，並讓它填充「城市」和「國家」字段？感謝您的時間和知識。

來源

2013-12-09 Cinq

看起來該學習如何使用調試器了？ –

如果你看看你在這裏發佈的數據，你將需要在數據中使用items數組。

container.find('input[name="City"]').val(data.items[0].City); 
container.find('input[name="State"]').val(data.items[0].StateName);

來源

2013-12-09 20:58:19 Kyle

我也試過這個，再次，沒有填充任何字段 – Cinq

@Cinq在'handleResp'裏面''console'log'' data'。是否發佈了與您在問題中發佈的相同的確切回覆？如果是這樣，請注意，您必須將else else（'數據中的城市'）檢查改爲'else if（data.items [0]中的'City'） – Kyle

else if（'City'in data .items [0]）解決了我的問題，現在這兩個字段都正確填充。謝謝你 – Cinq

時返回長相目的是一種數組對象的。

所以首先獲取items數組並引用其中的第一項。

function handleResp(data) { 
     // Check for error 
     if (data.error_msg) 
      errorDiv.text(data.error_msg); 
     else if ("City" in data) { 
      var info = data.items[0]; 
      // Set city and state 
      container.find("input[name='City']").val(info.City); 
      container.find("input[name='State']").val(info.State); 
     } 
    }

來源

2013-12-09 20:58:48

我試過應用這個，但沒有改變我的webform。 – Cinq

將JSON數據導入表單域

回答

相關問題