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 +脚本）存储在'registration / view /'

位置

checkevent.php文件存储在“注册”位置

中

我尝试通过在其中放置警报来检查add_event按钮的按钮单击功能是否正常工作。但它不起作用。

我的预期输出是，如果表格存在，则跨度应显示“已存储”，否则应显示“继续”

P.S：我是新手使用这些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网址，如果您是通过位于＆＃39;注册/查看＆＃39;并且您正在呼叫位于＆＃39; registration＆＃39;中的网页，您需要将网址更改为：url: '/registration/checkevent.php'
因为php文件与调用它的脚本位于同一个地方。
祝你好运

Answer 2

您更改此行：

     url: 'checkevent.php',

由此：

     url: '../checkevent.php',

键入F12并在控制台中检查ajax调用以查看是否一切正常

Ajax函数调用不起作用

2 个答案: