在html文檔中使用表單時，如何在同一頁面中顯示數據？

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文檔中使用表單時，如何在同一頁面中顯示數據？

問題描述

3 個解決方案

解決方案1
1 已采納 2015-04-27 05:52:10

解決方案2
0 2015-04-27 05:53:29

解決方案3
0 2015-04-27 06:06:55

在html文檔中使用表單時，如何在同一頁面中顯示數據？

問題描述

3 個解決方案

解決方案1 1 已采納 2015-04-27 05:52:10

解決方案2 0 2015-04-27 05:53:29

解決方案3 0 2015-04-27 06:06:55

解決方案1
1 已采納 2015-04-27 05:52:10

解決方案2
0 2015-04-27 05:53:29

解決方案3
0 2015-04-27 06:06:55