iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 29
0
Modern Web

PHP入門系列 第 29

Day29-PHP & Ajax & jQuery

  • 分享至 

  • xImage
  •  

這次範例要將jQuery、Ajax結合Php:實現部份更新網頁。

記得引入jQuery:

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

GET:

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檔案名,傳資料。

輸出:
https://ithelp.ithome.com.tw/upload/images/20191015/20120962OGgA4z9joP.png

POST:

與GET方式相似,種類type:"POST"$_POST['name']取值。
ajax傳送多筆資料data: {name: $('#name').val(),...}

參考資料:https://www.youtube.com/watch?v=TR0gkGbMwW0


上一篇
Day28-jQuery
下一篇
Day30-PHP & Ajax & JavaScript
系列文
PHP入門30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言