Question

我正在通过jQuery创建动态输入文本框字段。当用户单击该链接时，将创建两个输入字段。在左侧输入中，用户可以键入代码（或DB表id），在右侧输入中，他们应该看到与id相关的名称作为结果。

为了做到这一点，我附加了一个'blur'事件，该事件将向PHP脚本发出一个AJAX请求，该脚本将查询数据库以检索信息。但是我的代码无效。

这是我到目前为止所尝试的内容：

consulta.php

<!DOCTYPE html>
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

            var contenedor      = $("#contenedor");
            var AddButton       = $("#agregarCampo");

            var x = $("#contenedor div").length + 1;
            var FieldCount = x-1;

            $(AddButton).click(function (e)
            {
                if(x)
                {
                  FieldCount++;
                  $(contenedor).append('<div class="added"><input type="text"  name="codigo[]" id="campo'+FieldCount+'" placeholder="Ingrese codigo ID '+ FieldCount +'"/><input type="text" name="nombre" id="nombre'+FieldCount+'" value=""></div>');
                  x++;
                }
            return false;
            });

          });
</script>
</head>
<body>
  <div id="cliente">
<table>
  <tr>
    <td>
      Codigo
    </td>
  </tr>
  <tr>
    <td>
        <div id="contenedor">
              <div class="added">
                <input type="text" name="codigo[]" id="codigo" placeholder="Ingrese codigo ID" required/>
                <input type="text" name="nombre" id="nombre" value="">
              </div>
            </div>
      <p>
      <a id="agregarCampo" href="#">Agregar Campo</a>
      </p>

    </td>
  </tr>
</table>
</div>
    <script type="text/javascript" src="cliente.js"></script>
</body>
</html>

cliente.js

$(function(){
   $('#cliente').on('blur','#codigo',function(){
    var id = $(this).parents('div').attr('id');
      var valor = this.value;
      if(valor.length>=1){
         var consulta = $.ajax({
            type:'POST',
            url:'cliente.php',
            data:{codigo:valor},
            dataType:'JSON'
         });

         consulta.done(function(data){
            if(data.error!==undefined){
               $('#estado').html('Ha ocurrido un error: '+data.error);
               return false;
            } else {
               if(data.nombre!==undefined){$("#cliente #nombre").val(data.nombre);}
               return true;
            }
         });

      }
   });
});

cliente.php

<?php

$codigo=$_POST['codigo'];
$conexion=mysqli_connect("localhost","root","","gabu");
if (mysqli_connect_errno($conexion)) {
    echo "Fallo al conectar a MySQL: " . mysqli_connect_error();
}

$registros=mysqli_query($conexion, "select * from estudiantes where estudiante_id='$codigo'") or
  die("Problemas en el select:".mysqli_error());

if ($reg=mysqli_fetch_array($registros))
{
  $return = array('nombre' => $reg['nombre_estudiante']);
} else {
  $return = array('nombre'=>'No existe el registro');
}
   die(json_encode($return));
?>

它应该是这样的。请帮忙。感谢。

Answer 1

我建议分别调试前端和后端。

我已经将clinte.php重写为仅显示json

<?php

$codigo=$_POST['codigo'];

$return = $_POST;
$return = array('nombre' => 1337);

die(json_encode($return));
?>

它似乎正在发挥作用。

问题是，您是否按ID列进行选择，是否为数字？

你也可以添加你的数据库结构吗？

Answer 2

你有一些问题。最突出的是HTML ID和类。没有理由动态创建ID，因为您可以使用类进行参考。此外，在PHP中，您应该使用mysqli的正确语法并返回带有标头的正确JSON。

这就是我要做的事情：

<强> HTML / JS：

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {

                var $contenedor = $("#contenedor");
                var $AddButton = $("#agregarCampo");

                $AddButton.click(function (e) {
                    e.preventDefault();
                    var FieldCount = $contenedor.children('div').length + 1;
                    $contenedor.append('<div class="added">\
                                            <input type="text" class="codigo_input" placeholder="Ingrese codigo ID ' + FieldCount + '"/>\
                                            <input type="text" class="nombre_input" >\
                                          </div>');
                });

            });
        </script>
    </head>
    <body>
        <div id="cliente">
            <table>
                <tr>
                    <td>
                        Codigo
                    </td>
                </tr>
                <tr>
                    <td>
                        <div id="contenedor">
                            <div class="added">
                                <input type="text" class="codigo_input" placeholder="Ingrese codigo ID" required/>
                                <input type="text" class="nombre_input" value="">
                            </div>
                        </div>
                        <p>
                            <a id="agregarCampo" href="#">Agregar Campo</a>
                        </p>

                    </td>
                </tr>
            </table>
        </div>
        <script>
            $(function () {
                $('#cliente').on('blur', '.codigo_input', function () {
                    var $container = $(this).closest(".added");
                    var valor = $(this).val();

                    if (valor.length >= 1) {

                        var consulta = $.ajax({
                            type: 'POST',
                            url: 'cliente.php',
                            data: {codigo: valor},
                            dataType: 'JSON'
                        });

                        consulta.done(function (data) {
                            if (data.error !== undefined) {
                                $('#estado').html('Ha ocurrido un error: ' + data.error);
                                return false;
                            } else {
                                if (data.nombre !== undefined) {
                                    $container.find('.nombre_input').val(data.nombre);
                                }
                                return true;
                            }
                        });

                        consulta.error(function(a,b,c){
                            console.log(a);
                            console.log(b);
                            console.log(c);
                        });

                    }
                });
            });
        </script>
    </body>
</html>

<强> PHP

$codigo = $_POST['codigo'];
$conexion = mysqli_connect("localhost", "root", "", "gabu");
if (mysqli_connect_errno()) {
    echo "Fallo al conectar a MySQL: " . mysqli_connect_error();
}

$registros = mysqli_query($conexion, "select * from estudiantes where estudiante_id='$codigo'") or
die("Problemas en el select:" . mysqli_error($conexion));

if (mysqli_num_rows($registros) > 0) {
    $reg = mysqli_fetch_assoc($registros);
    $return = array('nombre' => $reg['nombre_estudiante']);
} else {
    $return = array('nombre' => 'No existe el registro');
}

header('Content-Type: application/json');
echo json_encode($return);

使用动态字段通过AJAX / jQuery检索数据库信息的问题

2 个答案: