Day29-PHP & Ajax & jQuery

第 11 屆 iThome 鐵人賽

DAY 29

Modern Web

PHP入門系列第 29 篇

11th鐵人賽

annann_ana

團隊紅蟳當兵等他開賽

2019-10-15 19:27:28

4542 瀏覽

分享至

這次範例要將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檔案名，傳資料。

輸出：