0

我有一个使用 jquery 的简单 Ajax 调用：

jQuery(".deletebutton").on("click", function() {
    if (confirm("Are you sure you want to delete?"))
    {
        jQuery.ajax({
            url: 'index.php?option=com_recordings&task=deletevideos&format=raw',
            type: "POST",
            success: function(data){
                console.log("anything?"); //never get here with FF and Chrome
                if (data == 'blah')
                {
                    alert("success"); //only with IE
                }
            }
        });
    }
});

网址很奇怪，因为我正在使用 Joomla 组件开发。它本质上指向一个具有echo "blah";. html 只是一个带有 class 的按钮deletebutton。

在 IE 上，此代码工作正常并触发警报。在 FF 和 Chrome 上它不起作用。检查jqXHR.status显示它返回 0。我在 Firebug 中看不到任何指向我这里问题的东西。知道发生了什么吗？

编辑：我注意到它与我的 html 按钮有关。当前按钮在表单内：

        <form name="myform" action="">
        <table id="webcam-table" class="pretty">
            <thead>
            <tr>
                <th>Camera Name</th>
                <th>Date Created</th>
                <th>Video Size</th>
                <th>Video Length</th>
                <th>
                    <input type="checkbox" name="checkboxselectall" title="Select All" />
                    <button class="deletebutton" title="Delete the selected videos" >Delete</button>
... //a table with checkboxes (for the form) and other stuff
</form>

但是如果我在这个表单之外创建一个简单的按钮，我的 ajax 调用会按预期工作。这里发生了什么？

4

3 回答 3

1

更新我的 jQuery 版本后，我成功运行了您的代码。on() 函数是在 1.7 版中引入的。以下代码有效。我将变量传递给 blah.php，将它们传回并在警报中回显它们。

$(document).ready(function(){
    jQuery(".deletebutton").on("click", function(event) {
        if (confirm("Are you sure you want to delete?")){
            jQuery.ajax({
                url: 'blah.php?option=com_recordings&task=deletevideos&format=raw',
                type: "POST",
                success: function(data){
                    alert(data);
                }
            });
        }
    });
});

这是blah.php：

<?php
echo $_GET['option'].' '.$_GET['task'].' '.$_GET['format'];

这是body标签的内容：

<body>
    <form name="myform" action="">
        <table id="webcam-table" class="pretty">
            <thead>
            <tr>
                <th>Camera Name</th>
                <th>Date Created</th>
                <th>Video Size</th>
                <th>Video Length</th>
                <th>
                    <input type="checkbox" name="checkboxselectall" title="Select All" />
                    <button class="deletebutton" title="Delete the selected videos" >Delete</button>
                </th>
             </tr>
             </thead>
         </table>
    </form>
</body>
于 2013-01-02T22:19:25.043 回答
1

在过去的几个小时里，我一直在为此苦苦挣扎。我遇到了这个帖子。似乎还没有完全解决...您实际上在答案中提示了我...

默认情况下，一个 <button> 与 <input type="submit> 相同。这意味着该按钮正在尝试提交您的表单。当您将按钮移出表单时，您自己提示了该按钮。

所以发生的事情是，只要您单击按钮，按钮处理程序就会启动并运行 ajax 调用。然后，按钮处理程序在 ajax 调用返回数据之前完成。然后提交处理程序运行。在从 ajax 调用取回数据之前，您最终会提交页面。ajax 调用检测到这一点并中止。中止导致错误函数正在运行，但没有好的数据，因此错误代码为零 (0)。

为什么这适用于 IE 而不是 FF 和 Chrome，很可能是 IE 如何处理按钮处理程序的问题。

解决方案是使用 preventDefault 阻止提交处理程序运行。所以你的代码看起来像......

$(document).ready(function(){
    jQuery(".deletebutton").on("click", function(event) {
        event.preventDefault();
        event.stopPropagation();

        if (confirm("Are you sure you want to delete?")){
            jQuery.ajax({
                url: 'blah.php?option=com_recordings&task=deletevideos&format=raw',
                type: "POST",
                success: function(data){
                    alert(data);
                }
            });
        }

        return false;
    });
});
于 2013-04-09T08:14:22.837 回答
0

嘿，实际上这是跨域问题，所以由于安全问题，一些 ajax 无法在 chrome 上运行......

在 chrome 中，您可以通过使用以下过程手动禁用网络安全来运行它

  1. 打开命令提示符（运行> cmd）

  2. 键入以下命令

    "C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security

笔记

  1. 运行此命令时，Chrome 将关闭。
  2. C:\Program Files\Google\Chrome\Application\chrome.exe您可以将其替换为已安装的 chrome.exe 的路径

运行此命令后，如果存在跨域问题，它将打开运行 ajax 的 chrome。

于 2013-02-06T07:15:37.463 回答