為JavaScript與Ajax結合php應用，記得引入JavaScript<script type="text/javascript">。
html:
name:
<input type="text" id="name">
<p>
password:
<input type="text" id="password">
<input type="button" value="login" onclick="post();">
</form>
<div id="result"></div>
為html表單的基本介面。設定點擊按鈕後，執行onclick的post()的function，<div></div>為按下按鈕後所產生字樣所預留的位置。
JavaScript:
<script type="text/javascript">
function post(){
$.post('test.php',{name:$('#name').val(),password:$('#password').val()},
function(data){
$('#result').html(data);
});
}
</script>
自行命名post()的function，用POST方式。
.val();為jQuery取值方式，因此需要引入jQuery!<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
php:
<?php
$name = $_POST['name'];
$password = $_POST['password'];
echo "hi";
?>
輸入欄位後，出現hi字樣。
輸出：
希望這些資料對 PHP網頁初學者會有幫助！加油 : )
參考資料：https://www.youtube.com/watch?v=jVAaxkbmCts
iThome鐵人賽
看影片追技術