這次範例要將jQuery、Ajax結合Php:實現部份更新網頁。
記得引入jQuery:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
html:檔案為index.php
<body>
Please enter ur name
<input id="name"/>
<button id="send"> send </button>
<div id="result"></div>
</body>
為表單的介面。
php:檔案為test.php
<?php
$result= $_GET['name'];
echo "your name is ".$result;
?>
為輸出結果的文字部分。
jQuery & Ajax:檔案為index.php
<body>
<script>
$(document).ready(function(){
$('#send').click(function(){
$.ajax({
type: 'GET',
url: 'test.php',
data: 'name='+ $('#name').val(),
success:function(msg){
$('#result').html(msg);
}
})
})
});
</script>
</body>
當按下按鈕後執行的部分,url放入要連接的php檔案名,傳資料。
輸出:
與GET方式相似,種類type:"POST"
,$_POST['name']
取值。
ajax傳送多筆資料data: {name: $('#name').val(),...}
參考資料:https://www.youtube.com/watch?v=TR0gkGbMwW0