个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 06:00:54 24 4
gpt4 key购买 nike

我正在通过 jQuery 创建动态输入文本框字段。当用户单击该链接时，将创建两个输入字段。在左侧输入中，用户可以输入代码(或数据库表 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));
?>

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

enter image description here

最佳答案

您遇到一些问题。最突出的是 HTML ID 和类。没有理由动态创建 ID，因为您可以使用类作为引用。另外，在 PHP 中，您应该为 mysqli 使用正确的语法并返回带有 header 的正确 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);

关于javascript - 使用动态字段通过 AJAX/jQuery 检索数据库信息的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37281039/

24 4 0
文章推荐： ios - 从 UITableViewRowAction 触发 segue
文章推荐： c++ - 此代码在 C++ 中出现杂散的 '\342' 编译器错误
文章推荐： ios - collectionView 中每个单元格的 NSFetchedResultsController
文章推荐： c++ - 通过向右移动对值数组进行排序
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com