在html文档中使用表单时，如何在同一页面中显示数据？
[英]How do i display data in the same page while using a form in a html doc?
问题描述
I've used javascript and php to get data from the database and then posting it on the same page. 
我使用javascript和php从数据库中获取数据，然后将其发布在同一页面上。 I've got the output for that. 我已经得到了输出。 But when i'm using tag, the data is not being retrieved instead the page is just being refreshed and nothing happens. 但是，当我使用标签时，不会检索数据，而是只是刷新页面而没有任何反应。 Can someone please help me in getting the output while using the tag. 有人可以在使用代码时帮助我获取输出吗？ Thanks in advance. 提前致谢。
HTML FILE: HTML档案：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Enter MMTI Number: <input type="text" name="EnrNo" id="EnrNo" /><br/><br />
<input type="submit" name="retrieve" value="submit" id="EnrNo-sub" />
<div id="EnrNo-data"></div>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$('#EnrNo-sub').on('click', function() {
var EnrNo = $('input#EnrNo').val();
if (EnrNo != '') {
$.post('retrieve.php', {EnrNo: EnrNo}, function(data) {
$('div#EnrNo-data').html(data);
});
}
});
</script>
</body>
</html>
PHP FILE: PHP文件：
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'DB';
$db = new mysqli($dbhost, $dbuser, $dbpass, $dbname);
if(mysqli_connect_errno())
{
die("connection couldn't be established");
}
if(isset($_POST['EnrNo']) === true && empty($_POST['EnrNo']) === false) {
//$Enr = $_POST['EnrNo'];
$EnrNo = mysql_real_escape_string ($_POST['EnrNo']);
$query = "Select * FROM cert WHERE EnrNo = '$EnrNo'";
$result = $db->query($query);
$total_num_rows = $result->num_rows;
while ($row=$result->fetch_array())
{
echo "Enr. No: MMTI- " .$row["EnrNo"].'<BR />';
echo "Name: " .$row["Name"].'<BR />';
echo "Batch Code: " .$row["Batch Code"].'<BR />';
echo "Start Date: " .$row["Start Date"].'<BR />';
echo "End Date: ".$row["End Date"].'<BR />';
echo "Course: " .$row["Course"].'<BR />';
echo "Duration: " .$row["Duration"].'<BR />';
} mysqli_free_result($result);
} else {
echo ('Data not found');
};
?>
3 个解决方案
解决方案1
1 已采纳 2015-04-27 05:52:10
You need to stop form from submitting and refreshing page: You can use event.preventDefault() or return false on your event handler. 您需要停止表单的提交和刷新页面：您可以使用event.preventDefault()或在事件处理程序上return false 。
$(document).ready(function () {
$('#EnrNo-sub').on('click', function (e) {
e.preventDefault(); // Stop default action of submit form
var EnrNo = $('input#EnrNo').val();
if (EnrNo != '') {
$.post('retrieve.php', {
EnrNo: EnrNo
}, function (data) {
$('div#EnrNo-data').html(data);
});
}
});
});
解决方案2
0 2015-04-27 05:53:29
You could use a button instead of a submit for your button-element, or you could prevent the default action for the button in your click-Event handler: 您可以使用按钮而不是按钮元素来提交，或者可以在click-Event处理程序中阻止按钮的默认操作：
$('#EnrNo-sub').on('click', function(ev) {
ev.preventDefault();
var EnrNo = $('input#EnrNo').val();
if (EnrNo != '') {
$.post('retrieve.php', {EnrNo: EnrNo}, function(data) {
$('div#EnrNo-data').html(data);
});
}
});
解决方案3
0 2015-04-27 06:06:55
You need to stop page refresh. 您需要停止页面刷新。 Your data is not updated because of page refresh. 由于页面刷新，您的数据未更新。
$('.click').click(function(e){
e.preventDefault();
})
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.