使用jQuery將json值返回到表單字段

我用我的代碼創建了一個jsfiddle - 不是CSS部分具有PHP邏輯僅用於演示。使用jQuery將json值返回到表單字段

我想在zip字段中輸入郵編 - 然後一旦按鈕被點擊，它會查詢geocode googlemaps腳本並返回一個json對象 - 我只是有問題返回到表單字段。我可以在控制檯日誌中看到json - 但是在將它傳遞迴視圖時，我做錯了什麼。有任何想法嗎？

http://jsfiddle.net/JxBQZ/2/

這裏是JS文件

$('form').on('click','#geocode',function(event) {  
    event.preventDefault(); 
    var zip = $('#geocode_field').val(); 

    $.ajax({ 
     type: "GET", 
     url: "/test/gmaps", 
     data: { zip: zip}, 
     dataType: "json", 
     cache: true, 
     success: function(data){ 
      console.log(data.street); 
     } 
    }); 
}); 


<form> 
<label>Zip</label> 
<input type="text" id="geocode_field" name="zip" /><button id="geocode">Search</button> 
<label>Street 1</label> 
<input type="text" id="street1" name="street1" /> 
<label>Street 2</label> 
<input type="text" id="street2" name="street2" /> 
<label>Town</label> 
<input type="text" id="town" name="town" /> 
<label>County</label> 
<input type="text" id="county" name="county" /> 
</form>

來源

2013-10-01 Zabs

您應該設置一個dataType到json，而不是jsonp，因爲你叫你自己的域名。 jsonp用於跨域ajax，並且還要求差異返回格式。

dataType: "json",

希望這有助於

來源

2013-10-01 08:52:10 Chokchai

我已經改變了它從JSONP以JSON作爲建議你可以閱讀更多關於$.post()方法 - 仍然無法使用傳遞變量 - 在Chrome調試器，我可以看到在網絡以下標籤 {「street」：「27th Avenue」，「town」：「Astoria」，「county」：「Queens」} - 不確定爲什麼我無法使用data.street將值傳遞到表單域.. – Zabs

did你收到來自服務器的數據爲json？我的意思是當你console.log（data.street）它顯示什麼？ – Chokchai

你好 - 我一直沒有起來，並認爲我的大腦還在睡覺 - 感謝您對dataType的幫助，否則我會一直在這一段時間:) – Zabs

Sussed它...它爲時尚早。 :(

$('form').on('click','#geocode',function(event) {  
    event.preventDefault(); 
    var zip = $('#geocode_field').val(); 

    $.ajax({ 
     type: "GET", 
     url: "/test/gmaps", 
     data: { zip: zip}, 
     dataType: "json", 
     cache: true, 
     success: function(data){ 
      console.log(data.street); 
      $('#street1').val(data.street); 
     } 
    }); 
});

來源

2013-10-01 08:58:23 Zabs

代替$.ajax()方法，使用方法$.post()然後它會更新你的意見部分

嘗試是這樣的：。

$.post("/test/gmaps", { data: zip}, function(data) { 
for (var key in data) { 
    $('#fetchdata').html(data.street); 
    }}, "json");

這裏，#fetchdata是id其中數據將被接收，它可以是跨度，輸入框等等。在你查詢的時候，你返回的值，以json_encoded格式返回。例如：

function some(){ 
//your query 
$data_to_return[] = something; 
echo json_encode($data_to_return); 
}

HERE

來源

2013-10-01 09:19:18

+1的額外提示:-)謝謝 – Zabs

你歡迎:-) –

使用jQuery將json值返回到表單字段

回答

相關問題