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调用以查看是否一切正常