我在引导程序模型中的数据没有正确显示

我添加了一个连接到数据库的搜索按钮，我想在引导模型上显示结果数据，点击搜索按钮后，我的页面会自动刷新，模型不会打开，当我再次点击搜索按钮时，它会显示数据。我想在第一次点击时显示我的bootstrap模型数据，而不刷新页面。

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>

<body>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Notification</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<?php
$con = new PDO("mysql:host=localhost;dbname=blog",'root','');
if (isset($_POST["submit"])) {
$str = $_POST["search"];
$sth = $con->prepare("SELECT * FROM `data` WHERE plotnumber = '$str'");
$sth->setFetchMode(PDO:: FETCH_OBJ);
$sth -> execute();
if($row = $sth->fetch())
{
?>
<br><br><br>
<table>
<!-- <tr>
<th>plotnumber</th>
<th>plotdetail</th>
<th>verified</th>
<th>size</th>
<th>status</th>
</tr> -->
<tr>
<td><?php echo $row->plotnumber; ?></td>
<td><?php echo $row->plotdetail;?></td>
<td><?php echo $row->verified;?></td>
<td><?php echo $row->size;?></td>
<td><?php echo $row->status;?></td>
</tr>
</table>
<?php 
}


else{
echo "Name Does not exist";
}

}
?>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<form method="post">
<label>Search</label>
<input type="text" name="search" required>
<input type="submit" name="submit" data-toggle="modal" data-target="#exampleModal">

</form>


<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

如果您要使用输入类型提交或按钮提交，它将重新加载页面，因为这是表单和提交按钮的默认行为。如果您不想重新加载页面，有几个选项。

您可以使用ajax加载表中的数据，并将输入类型设置为button而不是submit，然后调用包含ajax调用的函数
您可以在js中使用prevent-default函数来防止表单的默认行为

===============================================

$.ajax({
url: "jobs/php/job_single.php", //url to a php file where you have done php code
type: "POST",
data:  new FormData(document.getElementById("form")),
contentType: false,
processData:false,
cache: false,
success: function(data){

$('#id_of_empty_div').html(data) //  where you want to load data
}
});

//请记住，在url中，当您编写php文件的路径时，计算是在该php文件中完成的，然后您必须发送想要显示或加载的数据的完整html，例如，如果我这样做+-并将其作为标签发送，我会这样做：

$c = $a + $b;
echo '<label>'.$c.'<label>';

此外，提交输入将是button类型，而不是submit类型，它将具有onclick事件，您将在该事件中调用一个函数，该函数将包含此ajax调用

相关内容

最新更新

热门标签：