将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数据导入表单域

回答

相关问题