javascript - 如何使用 javascript 添加一个文本框，其中包含在数据库中检索到的引用计数？

Question

我正在尝试创建一个功能，该功能将检索数据库内具有相同 ID 的所有行，并希望将其显示在文本框中。这是获取所有行的 php 文件:

PHP:

<?php
    include_once('pConfig.php');
    if (!isset($ciCODe)){
        $ciCode = $_GET['cID'];
    }   
    $strSQL = "SELECT * FROM csi_contact_info WHERE ci_ID = '$ciCode'";
    $result = mysqli_query($db, $strSQL);
    if (!$result) {
        printf("Error: %s\n", mysqli_error($db));
        exit();
    }
    $json = mysqli_fetch_all($result, MYSQLI_ASSOC);
    echo json_encode($json);
?>

获取所有行后，我想在 JavaScript 中创建一个功能，该功能将使用上面的代码创建一个根据检索到的行数引用的文本框，并使用该文本框显示所有检索到的数据。

JavaScript:

function previewContactInformation(idCode){
        $.ajax({
        type: 'GET',
        url: '../back_php_Code/pPrevContactInfo.php',
        dataType: 'json',
        data: {'cID': idCode},
        contentType: 'application/json; charset=utf-8',
        success: function (response) {
            var cells = eval(response);
            for (var i=0; i <= cells.length ; i ++){
                '<div class="form-group row">'
                    + '<div class="col-md-4 col-lg-2">'
                    + '<label for="name-2" class="block">First name *</label>'
                    + '</div>'
                    + '<div class="col-md-8 col-lg-10">'
                    + '<input id="name-2" name="name" type="text" class="form-control value =' + cells[i].home_number + ' required">'
                    + '</div></div>'
            }
        },
         error: function (error) {
            console.log(error);
        }
   });   
}

有没有办法使用引用数据库中检索到的行数的 JavaScript 动态添加文本框？

Answer 1

出于安全原因，您应该使用filter_input，而不是直接使用$_GET:

$ciCode =filter_input(INPUT_GET, "cID");

更多信息:https://www.php.net/manual/de/function.filter-input.php

在您的作品中可能存在拼写错误:

if (!isset($ciCODe)){

我觉得应该是

if (!isset($ciCode)){

在 Javascript 中使用追加函数将字符串添加到 div 容器，例如

        for (var i=0; i <= cells.length ; i ++){
            $('#someId').append('<div class="form-group row">'
                + '<div class="col-md-4 col-lg-2">'
                + '<label for="name-2" class="block">First name *</label>'
                + '</div>'
                + '<div class="col-md-8 col-lg-10">'
                + '<input id="name-2" name="name" type="text" class="form-control value =' + cells[i].home_number + ' required">'
                + '</div></div>');
        }

阅读此处了解更多附加信息:https://api.jquery.com/append/

在您的 html 代码中，您需要一个用 id="someId"调用的 div 容器，可以在其中添加字符串，例如:

 <div id="someId">
 </div>