Question

我使用javascript和php从数据库中获取数据，然后将其发布在同一页面上。我已经得到了输出。但是，当我使用标签时，数据未被检索，而页面正在刷新，没有任何反应。在使用标签时，有人可以帮助我获取输出。提前谢谢。

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文件：

<?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');
    };
?>

Answer 1

您需要停止提交和刷新页面的表单：您可以在事件处理程序中使用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);
            });
        }
    });
});

Answer 2

您可以使用按钮而不是按钮元素的提交，或者可以阻止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);
        });
    }
});

Answer 3

您需要停止页面刷新。由于页面刷新，您的数据未更新。

$('.click').click(function(e){
    e.preventDefault();
})

在html doc中使用表单时如何在同一页面中显示数据？

3 个答案: