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

Question

我用我的代碼創建了一個jsfiddle - 而不是CSS部分有PHP邏輯只是為了演示。

我想在zip字段中輸入一個郵政編碼 - 然后一旦點擊該按鈕就會查詢地理編碼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>

Answer 1

您應該將dataType設置為json而不是jsonp ，因為您調用了自己的域。 jsonp用於跨域ajax，它還需要差異返回格式。

dataType: "json",

希望這可以幫助

Answer 2

而不是$.ajax()方法，使用$.post()方法。 然后它會更新您的視圖部分。

嘗試這樣的事情：

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

這里， #fetchdata是要接收數據的id，它可以是span，輸入框等。在你的查詢中，當你返回值時，以json_encoded格式返回它。 如：

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

您可以在此處閱讀有關$.post()方法的更多信息

Answer 3

抱了它......太早了。 :(

    $('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);
        }   
    });
});