Question

我目前正在尝试执行以下操作：我有两个输入字段，如下所示：

 <div class="form-group{{ $errors->has('plz') ? ' has-error' : '' }}">
                                <label for="plz" class="col-md-4 control-label">PLZ</label>

                                <div class="col-md-6">
                                    <input id="plz" type="number" class="form-control" name="plz"
                                           value="{{$plz}}" autofocus required>
                                </div>
                            </div>

                            <div class="form-group{{ $errors->has('city') ? ' has-error' : '' }}">
                                <label for="city" class="col-md-4 control-label">Stadt</label>

                                <div class="col-md-6">
                                    <input required id="city" type="text" class="form-control" name="city"
                                           value="{{$city}}">
                                </div>
                            </div>

一个用于邮政编码，一个用于城市。我想要的是，当有人输入邮政编码时，城市会自动填写（只需要德国城市）。所以例如有人输入70176作为邮政编码，然后＆＃34;斯图加特＆＃34;应该自动填写。我们需要AJAX吗？但是我不知道怎么做以及从哪里获取数据。

有人可以帮我吗？

PS：我使用Laravel作为PHP框架，如果这可能有帮助

Answer 1

有一些方法可以做到这一点，但最好的方法是使用Ajax。

在JQuery中你会使用这样的东西:(编辑[URL]和$ form部分）

var $form = $("form:eq(0)");
$form.find("input[name=plz]").on('keyup', function(){
    $.get('[URL]?plz=' + $(this).val, function(result) {
        $form.find('input[name=city]').val(result);
    });
});

现在在代码的服务器端创建一个搜索数据库的页面（您可能需要一个名称和邮政编码的数据库）并打印该城市的名称。

Answer 2

是的，你需要AJAX。我可能只能指出你正确的方向。

[后端]

您需要创建一个城市控制器和操作来在您的laravel应用程序中处理此请求，该应用程序返回JSON响应。例如。： http://localhost/api/city/ {邮递区号} 你的行动经纪人必须得到这个＆＃34;邮政编码＆＃34;参数然后将其与您的数据库匹配。（见步骤4）。找到匹配后，返回响应。 https://laravel.com/docs/5.4/controllers#single-action-controllers
此JSON响应将包含城市：例如：json_encode（[＆＃39; city＆＃39; =＆gt;＆＃39; stuttgart＆＃39;]）; https://laravel.com/docs/5.4/responses#json-responses
您可能需要获取可用于在PLZ和城市之间进行匹配的公共数据。 https://www.aggdata.com/free/germany-postal-codes
然后您必须使用CSV解析器库或创建一个，然后将邮政编码与此数据匹配。 https://github.com/parsecsv/parsecsv-for-php

[前端]

使用JS库，我推荐JQuery易于安装和小学习曲线。＆＃34; jQuery.get＆＃34;是你的朋友。 https://api.jquery.com/jquery.get/
所以你必须＆＃34;绑定＆＃34; PLZ输入上的onChange事件。 onChange，它必须做一个＆＃34; jQuery.Get＆＃34;并调用您在[backend]部分设置的URL。 http://api.jquery.com/bind/
从服务器获得响应后，找到要编写响应的元素，并将其放在那里。例如：jQuery（＆＃39; .element＆＃39;）。value（response.city）;

我希望它可以指出你正确的方向。

邮政编码到城市自动完成

2 个答案: