使用動態字段通過AJAX / jQuery檢索數據庫信息的問題
[英]Problems with retrieving database info through AJAX/jQuery using dynamic fields
問題描述
我正在通過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));
?>
它應該是這樣的。 請幫忙。 謝謝。
2 個解決方案
解決方案1
0 2016-05-17 16:09:09
我建議分別調試前端和后端。
我已經重寫了clinte.php只顯示json
<?php
$codigo=$_POST['codigo'];
$return = $_POST;
$return = array('nombre' => 1337);
die(json_encode($return));
?>
它似乎正在發揮作用。
問題是，如果您通過ID列進行選擇，它應該是數字嗎？
你也可以添加你的數據庫結構嗎？
解決方案2
0 已采納 2016-05-17 17:30:04
你有一些問題。 最突出的是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);
如何使用 PHP、MySqL 和 JQuery 將動態字段的值插入數據庫
[英]How to insert values of dynamic fields into database using PHP ,MySqL and JQuery
檢索 HTML 動態表單字段數據並保存到 MySQL 數據庫
[英]Retrieving HTML dynamic form fields data and saving to MySQL database
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.