Question

我使用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只是一个类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调用会按预期工作。这是怎么回事？

Answer 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>

Answer 2

过去几个小时我一直在努力。我跑过这个帖子。它似乎并没有完全解决......你实际上已经找到了答案......

默认情况下为＆lt; button＆gt;与＆lt; input type =“submit＆gt;相同。这意味着该按钮正在尝试提交您的表单。当您将该按钮移出表单时，您自己就会自己进入该表单。

所以发生的事情是，只要你点击按钮，按钮处理程序就会启动并运行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;
    });
});

Answer 3

嘿，实际上这是跨域问题，所以由于安全问题，一些ajax不适用于chrome ....

在Chrome中，您可以通过使用以下过程

手动禁用网络安全来运行此操作

打开命令提示符（运行＆gt; cmd）

输入以下命令

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

请注意

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

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

jquery ajax在IE上工作，而不是在Firefox / Chrome上工作

3 个答案: