我编写了以下 PHP 代码，用于从 MySQL 数据库检索多行，然后将其转换为 JSON。该 PHP 文件名为 sql_json.php，并使用 $.ajax 方法通过 jQuery 进行调用。 jQuery 代码位于文件 jquery_fetch.js 中。最后我想将其显示在 HTML 文件 json_search_user.html 中。从 MySQL 检索工作正常。但 jQuery 代码无法正常工作，因此无法显示编码后的 JSON。
PHP 代码:(sql_json.php)
<?php
require_once($_SERVER['DOCUMENT_ROOT'].'/php_revision/dbase.php'); //dbase.php contains dtabase parameters like servername, username,password etc.
$conn=mysqli_connect($server,$username,$password,$db_name) or die('Connection to database failed');
if($conn){
$sql="SELECT FNAME,LNAME,DEPT,MOBILE_NO FROM USER WHERE ROLE=?" ;
$stmt=mysqli_prepare($conn,$sql);
mysqli_stmt_bind_param($stmt,"s",$role);
$role=$_POST['role'];
if(mysqli_stmt_execute($stmt)){
$result=mysqli_stmt_get_result($stmt);
$json= array();
$data_array=array();
while($row=mysqli_fetch_assoc($result)){
$data_array['FNAME']=$row['FNAME'];
$data_array['LNAME']=$row['LNAME'];
$data_array['DEPT']=$row['DEPT'];
$data_array['MOBILE_NO']=$row['MOBILE_NO'];
array_push($json,$data_array);
}
echo json_encode($json);
}
mysqli_stmt_close($stmt);
}
else{
echo json_encode({"Status" : "No results found"});
}
?>
jQuery 代码:(jquery_fetch.js)
$(document).ready(function() {
$('#myForm').on('submit',function(e){
var role= $('#role').val();
$.ajax({
url:"sql_json.php",
type: "POST",
dataType: "JSON",
data:{role : role} ,
success: function(data){
var response= JSON.parse(data);
var genHtml='<table><tbody>';
for(var i=0;i<response.length;i++)
{
genHtml += '<tr><td>' + response[i].FNAME + '' + response[i].LNAME + '</td><td>' + response[i].DEPT + '</td><td>' + response[i].MOBILE_NO + '</td></tr>';
}
genHtml += '</tbody></table>';
$('#search_result').html(genHtml);
}
});
});
});
HTML 文件 (json_search_user.html)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search User </title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256- FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="jquery_fetch.js"></script>
</head>
<body>
<form method="POST" action="sql_json.php" id="myForm">
<label for="role">Select Role :</label>
<select id="role" name="role" required>
<option disabled selected>Select</option>
<option value="Author">Author</option>
<option value="Publisher">Publisher</option>
<option value="Admin">Admin</option>
</select>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<div id="search_result"></div>
</form>
</body>
</html>
最佳答案
您的表单中有一个操作，当您单击提交时，它将打开文件“sql_json.php”，因此您的 js 代码不会将 html 渲染到页面。您需要防止表单提交的默认行为。通过在 JavaScript 函数中添加 e.preventDefault() 。
关于javascript - 使用 jQuery $.ajax 方法显示包含 MySQL 表数据的 JSON，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54404727/