通过$.AJAX和JSON从mysql以PHP显示记录
我正在用PHP（buscador.PHP）开发一个搜索页面，我需要的是根据键入的ID显示（始终在同一个页面buscador.PHP）员工信息，为此我使用$.ajax编写了一个Jquery函数，以便通过ajax和JSON格式获取数据（数据库查询在process.PHP中编码） 我的问题是，当我定义ID并单击submit按钮时，它会将我重定向到process.php，而不是在buscador.php内的特殊区域中显示信息，info process.php显示为：通过$.AJAX和JSON从mysql以PHP显示记录,php,jquery,mysql,ajax,json,Php,Jquery,Mysql,Ajax,Json,我正在用PHP（buscador.PHP）开发一个搜索页面，我需要的是根据键入的ID显示（始终在同一个页面buscador.PHP）员工信息，为此我使用$.ajax编写了一个Jquery函数，以便通过ajax和JSON格式获取数据（数据库查询在process.PHP中编码） 我的问题是，当我定义ID并单击submit按钮时，它会将我重定向到process.php，而不是在buscador.php内的特殊区域中显示信息，info process.php显示为： {"users":{"status"
{"users":{"status":"OK","0":{"ID":"001","Nombre":"algo","cargo":"algo cargo"},"1":{"ID":"PHP001","Nombre":"Pablo Ernesto Tobar Mayora","cargo":"Web Programmer"},"2":{"ID":"PHP002","Nombre":"Pabletoreto Blogger","cargo":"Blogger Manager"},"3":{"ID":"PHP003","Nombre":"prueba de stored procedure en MySQL","cargo":"Database Administrator"},"4":{"ID":"PHP004","Nombre":"Prueba de funciones en MySQL","cargo":"Database Tester"}}}
<html lang="es-ES">
<head>
<meta name="tipo_contenido" content="text/html;" http-equiv="content-type" charset="utf-8">
<link type="text/css" rel="stylesheet" href="content/estilos.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="javascript/jquery.js" type="text/javascript"></script>
<title>BUSCADOR</title>
</head>
<form method="post" id="form_id" action="process.php">
<fieldset>
<legend> Buscador Asincrono</legend>
<p>ID a buscar: <input type="text" name="ID_name" id="ID_id"/><div id="estado_id"></div></p>
<p><input type="submit" id="submit_id" value="Buscar"/></p>
<img src="imagenes/cargando.gif" id="LoadingImage" style="display:none" align="center"/>
<div id="ajax_id"><b>Person info will be listed here...</b></div>
<div id="msg">
<table id="infoemp" border="1" style="display:none" align="center">
<thead>
<th>ID</th>
<th>Nombre</th>
<th>Cargo</th>
</thead>
<tbody></tbody>
</table>
</div>
</fieldset>
</form>
</html>
布斯卡多
巴斯卡多阿辛克罗诺酒店
我要一辆公共汽车：
人员信息将在此处列出。。。
身份证件
名义
货物
$(document).ready(function() {
$("#form_id").submit(function(e){
e.preventDefault();
if(validaForm()){
requestInfo();
}
});
});
function validaForm(){
var id_val = $("input#ID_id").val().trim();
//var id_val = id.val().trim();
if((id_val=="") || id_val.replace(/s+/,'') == ''){
alert("Favor ingrese el ID");
$("input#ID_id").addClass("posicionamiento");
$("#ajax_id").html("<div class='error'>Debe especificar el nombre</div>");
return false;
}else{
$("input#ID_id").removeClass("posicionamiento");
$("#div_id").empty();
}
return true;
}
function requestInfo(){
$("#submit_id").hide();
$("#ajax_id").html("");
$("#LoadingImage").show();
$("#ajax_id").html("<div class='cargando'> realizando busqueda</div>");
var url = $("#form_id").attr('action');
var data = $("#form_id").serialize();
var type = $("#form_id").attr('method');
alert(url);
$.ajax({
url:url,
data:data,
type:type,
cache: false,
contentType: "application/x-www-form-urlencoded",
dataType: 'json',
encode: true,
});
.done(function(data) {
if(data.status == "OK"){
$("#submit_id").show();
$("#ajax_id").html("");
$("#LoadingImage").fadeOut();
$("#infoemp").show();
$.each(data.users, function(i,user){
var tblRow =
"<tr>"
+"<td>"+user.ID+"</td>"
+"<td>"+user.Name+"</td>"
+"<td>"+user.cargo+"</td>"
+"</tr>" ;
$(tblRow).appendTo("#infoemp tbody");
});
} else { $("#ajax_id").html(data.status).addClass("cargando"); }
});
.fail(function( jqXHR, textStatus, errorThrown ) {
if ( console && console.log ) {
console.log( "La solicitud a fallado: " + textStatus);
}
});
}
$（文档）.ready（函数（）{
$（“#表格id”）。提交（功能（e）{
e、 预防默认值（）；
如果（validaForm（））{
requestInfo（）；
}
});
});
函数validaForm（）{
var id_val=$（“输入#id_id”）.val（）.trim（）；
//变量id_val=id.val（）.trim（）；
如果（（id_val==”）| id_val.replace（/s+/，“”）==“”）{
警报（“赞成进入el ID”）；
$（“input#ID_ID”）.addClass（“posicionamiento”）；
$（“#ajax_id”）.html（“Debe specifical el nombre”）；
返回false；
}否则{
$（“input#ID_ID”）.removeClass（“posicionamiento”）；
$（“#div_id”）.empty（）；
}
返回true；
}
函数requestInfo（）{
$（“提交id”）.hide（）；
$（“#ajax_id”）.html（“”）；
$（“#加载图像”）.show（）；
$（“#ajax_id”）.html（“realizando busqueda”）；
var url=$（“#form#id”）.attr（'action'）；
var data=$（“#form_id”）.serialize（）；
var type=$（“#form#id”）.attr（'method'）；
警报（url）；
$.ajax({
url:url，
数据：数据，
类型：类型，
cache:false，
contentType:“application/x-www-form-urlencoded”，
数据类型：“json”，
编码：对，
});
.done（函数（数据）{
如果（data.status==“正常”）{
$（“提交id”）.show（）；
$（“#ajax_id”）.html（“”）；
$（“#加载图像”）.fadeOut（）；
$（“#infoemp”）.show（）；
$.each（data.users，function（i，user）{
var tblRow=
""
+“”+用户ID+“”
+“”+用户名+“”
+“”+用户。货物+“”
+"" ;
$（tblRow）。附加到（“#infoemp tbody”）；
});
}else{$（“#ajax_id”）.html（data.status）.addClass（“cargando”）；}
});
.fail（函数（jqXHR、textStatus、errorshown）{
if（console&&console.log）{
console.log（“larequictudafallado:+textStatus”）；
}
});
}
<?php
$bd = "ejemplo";
$server ="localhost";
$user = "root";
$password = "";
if (isset($_POST['Submit']) && isset($_POST['ID_name'])) {
$valor = filter_var($_POST['ID_name'], FILTER_SANITIZE_STRING);
$var = array();
if ($valor == null)
$var["status"]="ERROR";
exit();
} else {
$mysqli = mysqli_connect($server, $user, $password, $bd);
if( ! $mysqli ) die( "Error de conexion ".mysqli_connect_error() );
$var["status"]="OK";
$sql = "SELECT * FROM empleado_php";
$result = mysqli_query($mysqli, $sql);
while($obj = mysqli_fetch_assoc($result)) {
$var[] = $obj;
}
$mysqli->close();
}
echo '{"users":'.json_encode($var).'}';
header('Content-type: application/json; charset=utf-8');
?>
encode:true，
});
.done（函数（数据）{
如果（data.status==“OK”）{回显“{”用户“.json_encode（$var）。}