[英]Ajax function call not working
I am trying to learn Ajax function calls in jquery. 我正在尝试学习jquery中的Ajax函数调用。 But I could not get the expected output. 但是我无法获得预期的输出。 My code is below 我的代码如下
The HTML and Script File is stored in the file 'addevent.php' HTML和脚本文件存储在文件“ addevent.php”中
HTML Code: 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 Part: 脚本部分:
<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>
The code in the file checkevent.php is below 文件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
?>
Please Note: I have stored the file 'addevent.php' (HTML+Script) in the location 'registration/view/' 请注意:我已将文件“ addevent.php”(HTML +脚本)存储在“注册/查看/”位置
The checkevent.php file is stored in the location 'registration' checkevent.php文件存储在“注册”位置
I tried to check if the button click function for add_event button is working by placing an alert inside it. 我试图通过在其中添加警报来检查add_event按钮的按钮单击功能是否正常工作。 But it doesn't work. 但这是行不通的。
My expected output is if the table exist the span should display 'already stored' else it should say 'continue' 我的预期输出是,如果该表存在,则范围应显示“已经存储”,否则应显示“继续”
PS: I am new to using these ajax call,so sorry if this seems silly. PS:使用这些ajax调用是我的新手,如果这看起来很傻,请抱歉。 Please help to understand these concepts clearly. 请帮助清楚地理解这些概念。
Thanks in advance 提前致谢
EDIT 编辑
OK got it. 好的,我知道了。 You missed a comma between success and error callbacks, which broke your Javascript... 您错过了成功和错误回调之间的逗号,这破坏了Javascript。
Please change script to this and it should work: 请更改此脚本,它应该可以工作:
<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>
You have a <button>
element inside a form. 您在表单内有一个<button>
元素。 The default type of a button is type="submit"
and therefore the form is submitted before the button onclick listener works. 按钮的默认类型为type="submit"
,因此在按钮onclick侦听器工作之前先提交表单。 Also you need to close a button element with </button>
另外,您还需要使用</button>
关闭按钮元素
Try to change it from 尝试将其从
<button class=btn name="add_event" id="add_event" />Add Event
to 至
<button type="button" class=btn name="add_event" id="add_event" >Add Event</button>
As for the ajax URL, if you are running it from a page located in 'registration/view' and you're calling a page located in 'registration', you need to change the url to something like: 至于ajax URL,如果您是从“注册/查看”页面中运行的,而您正在调用“注册”页面中的页面,则需要将URL更改为以下内容:
url: '/registration/checkevent.php'
because the php file isn't located in the same place as the script that's calling it. 因为php文件与调用它的脚本不在同一位置。
Good luck 祝好运
You change this line : 您更改此行:
url: 'checkevent.php',
By this : 这样 :
url: '../checkevent.php',
Type F12 and inspect your ajax Call in the console to see if everything is OK 键入F12并在控制台中检查您的ajax调用以查看是否一切正常
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.