php - 如何使用 Ajax 和 json 从 mysql 中填充选择

Question

我在 HTML 中有一个空的选择，我想通过数据库填充它。

我有一个按钮可以打开模态框并传递一个 id。使用该 ID，我从数据库中获取数据并填写一家公司的所有表单字段。然而，一家公司可以有多名员工，所以我想填写一个选择，以便显示与公司具有相同 ID 的所有员工。

例如:

公司 ID 是 43，我使用此 ID 填写所有表单字段(名称、位置等)并从数据库中获取数据。 在表 employee 中有 3 名员工的 ID 为 43 为 FK，我们将他们命名为 hans、max 和 peter。 现在我想填充一个显示所有 3 个的选择，以便用户可以选择其中一个，并根据该选择填充一个空表单，以便可以对其进行编辑。

我假设这涉及一个循环，但我不确定该怎么做。不确定它是否相关，但我所有的 mysqli 调用都使用 prepare，因为我读过这更安全。

到目前为止，我尝试过的循环是这样的，但它不起作用。我不确定是循环不工作还是我试图填充选择错误。

这是在一个选择中，所有输入字段都会被填充。

while ($row = $result->fetch_assoc()){
$prename= $row['prename'];
$surname= $row['surname'];

$users_arr[] = array("prename" => $prename, "surname" => $surname);
}

然后我返回数据如下

echo json_encode(array('users_arr'=>$users_arr));

并尝试在 AJAX 成功中填充选择

$.each(data.users_arr, function(key, val){ 
$("#contact_persons").append('<option id="' + data.prename + '">' + data.surname + '</option>');
});

谢谢

编辑:完整的 Ajax 调用:

$.ajax({
            url: url,
            data: data,
            dataType: 'json',
            cache: false,
            type: "POST",    
            error: function () {


                    $('#alertdone').removeClass('hidden');



        },
        //if ajax call is successful populate form fields and hide error message
        success: function (data) {


            //hide error message
            $('#alertdone').addClass('hidden');


                $.each(data.users_arr, function(key, val){ 
                $("#contact_persons").append('<option id="' + data.prename + '">' + data.surname + '</option>');
                });


            }


        });
    });

Answer 1

在你的AJAX成功你可以试试

var d = $.parseJSON(data);
$.each(d.users_arr, function(index, element) {
$("#contact_persons").append('<option id="' + element.prename + '">' + element.surname + '</option>');
});

编辑

$.ajax({
            url: url,
            data: data,
            cache: false,
            type: "POST",    
            error: function () {
                    $('#alertdone').removeClass('hidden');
             },
            success: function (data) {
             //hide error message
            $('#alertdone').addClass('hidden');
            var d = $.parseJSON(data);
            $.each(d.users_arr, function(index, element) {
            $("#contact_persons").append('<option id="' + element.prename           + '">' + element.surname + '</option>');
            });
            }
        });
    });