Javascript 单击按钮时调用 AJAX 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28360991/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Calling AJAX is not working onclick of button
提问by Bhavik Joshi
I am calling an API from AJAX,
我正在从 AJAX 调用 API，
When I am Calling AJAX like this,
当我像这样调用 AJAX 时，
$(function (){
$.ajax({
type:'GET',
url :"/tournament",
dataType: 'json',
success: function(data) {
console.log('success',data);
},
error:function(exception){
alert('Exception:'+exception);
}
});
});
This is working fine without any errors but when I am using this..
这工作正常，没有任何错误，但是当我使用它时..
$('#btnadad').on('click',function (){
alert("ok");
$.ajax({
type:'GET',
dataType: 'json',
url :"/tournament",
success: function(data) {
console.log('success',data);
},
error:function(exception){
alert('Exception:'+exception);
}
});
});
This popups "error" alert, can anybody help me whats the error?
这个弹出“错误”警报，有人能帮我看看是什么错误吗？
HTML Body is Like this,
HTML 正文是这样的，
<form>
<h2>
<font color="#FFFFFF">
<br><br><input type="text" name="name" placeholder ="Tournament Name"><br>
<table>
<?PHP
//print_r($teams);
for ($i = 0; $i < $count; $i++) {
?>
<tr>
<td><input type="checkbox" name=<?php echo $taemId[$i] ?></td>
<td><?php echo $teamname[$i] ?></td>
</tr>
<?php
}
?>
</table>
<button id="btnadad">ADD</button>
</form>
<script src ="/js/myjs.js"></script>
here I am calling one API and Displaying the Checkboxes Dynamically.
在这里，我正在调用一个 API 并动态显示复选框。
I am checking The Console...when I am clicking button ,the alert box is popping up and in networks tab tournament path's status is cancelled .when I am clicking it on to see the response it shows fail to load response data.
我正在检查控制台...当我单击按钮时，警报框弹出，在网络选项卡中锦标赛路径的状态被取消。当我单击它以查看响应时，它显示无法加载响应数据。
I have Tried calling this function in same html file in tag but it is also not working.
我试过在标签中的同一个 html 文件中调用这个函数，但它也不起作用。
<script>
function getOnClick()
{
alert("ok");
$.ajax({
type: 'GET',
url: "http://harshal:8888/tournament",
success: function(data) {
alert("no error in alert");
console.log('success', data);
},
error: function() {
alert("error in alert");
}
});
}
and calling it on button's onclick Event ut it also gives me the same result
并在按钮的 onclick 事件上调用它它也给了我相同的结果
回答by Bhavik Joshi
Thanks For the Help Friends,your Efforts matters a lot to me,I am feeling glad to tell you that I just found the answer for this the below code makes it happened ..
感谢您的帮助朋友，您的努力对我很重要，我很高兴地告诉您，我刚刚找到了答案，下面的代码使它发生了..
$('#btnadad').on('click',function (e){
alert("ok");
$.ajax({
type:'GET',
url :"/tournament",
dataType: 'json',
success: function(data) {
console.log('success',data);
},
error:function(exception){alert('Exeption:'+exception);}
});
e.preventDefault();
});
回答by Ravi Gadag
$ajax error function takes 3 parameters. Jquery ajax error
$ajax 错误函数需要 3 个参数。 jQuery ajax 错误
A function to be called if the request fails. The function receives three arguments: The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object, a string describing the type of error that occurred and an optional exception object, if one occurred.
请求失败时调用的函数。该函数接收三个参数：jqXHR（在 jQuery 1.4.x 中，XMLHttpRequest）对象、描述发生的错误类型的字符串和可选的异常对象（如果发生）。
try changing like this
尝试像这样改变
$('#btnadad').on('click',function (){
alert("ok");
$.ajax({
type:'GET',
dataType: 'json',
url :"/tournament",
success: function(data) {
console.log('success',data);
},
error:function(jqXHR,textStatus,errorThrown ){
alert('Exception:'+errorThrown );
}
});
});
回答by Pushpa Kumara
I got the same issue. If you use onclick, do not use a form. In local environment, it is working, but when you go to production, the ajaxrequest is cancelling. The solution is removing the formtag and adding a divtag.
我遇到了同样的问题。如果使用onclick，请勿使用form. 在本地环境中，它正在工作，但是当您进入生产环境时，ajax请求被取消。解决方案是删除form标签并添加div标签。
