Ajax函數調用不起作用

Question

我正在嘗試學習jquery中的Ajax函數調用。 但是我無法獲得預期的輸出。 我的代碼如下

HTML和腳本文件存儲在文件“ addevent.php”中

HTML代碼：

<form id="addinfo">
Year: <div class="styled-select">
<select id="year">
<option>2017</option><option>2018</option>
<option>2019</option><option>2020</option>
</select>
</div>

Team:<div class="styled-select">
<select id="team">
<option>UG</option><option>PG</option>
</select>
</div>
<button class=btn name="add_event" id="add_event" />Add Event
<span id="result"></span>
</form>
</body>
</html>

腳本部分：

<script>
$(document).ready(function(){      
    $("#add_event").click(function(){  
        var y= $("#year option:selected").text();
        var t= $("#team option:selected").text();

        $.ajax({
            url: 'checkevent.php', 
            type: 'POST',
            dataType: 'json',
            data: {year:y , team: t},  
            success: function(result) {  
                console.log(result);
                var val=result['result'];
                document.getElementById("result").innerHTML=val;
            }
            error: function(exception) {
                alert('Exeption:'+exception);
            }
        });
    });  
});
</script>

文件checkevent.php中的代碼如下

header("Content-Type: application/json", true);
$db = new PDO('mysql:host=localhost;dbname=register;charset=utf8mb4', 'root', '', array(PDO::ATTR_EMULATE_PREPARES => false, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION));
$year =$_POST['year'];
$team =$_POST['team'];
$table=$team.$year;
try
{
    if ($db->query("SHOW TABLES LIKE '" . $table . "'")->rowCount() > 0)
    {
        $r=array("result"=>"already stored");
        echo json_encode($r);
    }
    else
    {
        $r=array("result"=>"continue");
        echo json_encode($r);
    }   
}//end of try
catch(PDOException $e) 
{
    $r=array("result"=>"error");
    echo json_encode($r);
}//end of catch
?>

請注意：我已將文件“ addevent.php”（HTML +腳本）存儲在“注冊/查看/”位置

checkevent.php文件存儲在“注冊”位置

我試圖通過在其中添加警報來檢查add_event按鈕的按鈕單擊功能是否正常工作。 但這是行不通的。

我的預期輸出是，如果該表存在，則范圍應顯示“已經存儲”，否則應顯示“繼續”

PS：使用這些ajax調用是我的新手，如果這看起來很傻，請抱歉。 請幫助清楚地理解這些概念。

提前致謝

Answer 1

編輯

好的，我知道了。 您錯過了成功和錯誤回調之間的逗號，這破壞了Javascript。

請更改此腳本，它應該可以工作：

<script>
    $(document).ready(function(){      
        $("#add_event").click(function(){  
            var y= $("#year option:selected").text();
            var t= $("#team option:selected").text();

            $.ajax({
                url: '/registration/checkevent.php', 
                type: 'POST',
                dataType: 'json',
                data: {year:y , team: t},  
                success: function(result) {  
                    console.log(result);
                    var val=result['result'];
                    document.getElementById("result").innerHTML=val;
                },
                error: function(exception) {
                    alert('Exeption:'+exception);
                }
            });
        });  
    });
</script>

---

您在表單內有一個<button>元素。 按鈕的默認類型為type="submit" ，因此在按鈕onclick偵聽器工作之前先提交表單。 另外，您還需要使用</button>關閉按鈕元素

嘗試將其從

<button class=btn name="add_event" id="add_event" />Add Event

至

<button type="button" class=btn name="add_event" id="add_event" >Add Event</button>

至於ajax URL，如果您是從“注冊/查看”頁面中運行的，而您正在調用“注冊”頁面中的頁面，則需要將URL更改為以下內容：
url: '/registration/checkevent.php'
因為php文件與調用它的腳本不在同一位置。

祝好運

Answer 2

您更改此行：

     url: 'checkevent.php',

這樣 ：

     url: '../checkevent.php',

鍵入F12並在控制台中檢查您的ajax調用以查看是否一切正常