使用 jQuery 将 json 值返回到表单域

Using jQuery to return json values to a form field

本文关键字：表单 返回 jQuery json 使用      更新时间：2023-09-26

我用我的代码创建了一个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>

您应该将dataType设置为 json 而不是 jsonp ，因为您调用了自己的域。 JSONP用于跨域Ajax，它还需要差异返回格式。

dataType: "json",

希望这有帮助

不要使用

$.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()方法的更多信息

支持它...现在还为时过早。:(

    $('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);
        }   
    });
});
相关文章：