Question

我正在使用Ajax和JQUERY提交表单。出于某种原因，我似乎无法运行AJAX。表格在fancybox 2模式中，所以我认为这可能与它有关，但我无法弄明白。在fancybox模式中进行AJAX调用是否需要做些什么？

我的代码：collection_create_input是真的

$(".edit-post").submit(function(e) {

    var dataString = $(this).serialize();


if (collection_create_input == "true") {
    $.ajax({  
        type: "POST",  
        url: "checkcollection.php",  
        data: dataString,
        async: false,
        success: function(data) {
          $(this).parent(".modal-content").find("#field1secondary").show();
        }
    });
}

        e.preventDefault();

    });

注意：

Answer 1

您确定还要包含jQuery库吗？

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

如果您以这种方式使用ajax，则必须包含它，否则它将无法运行。

Answer 2

这里要注意的第一件事是

发送ajax请求时collection_create_input是否为真？

因为如果它是假的，它将不会执行。并且不会按照您希望的方式发送ajax请求。

您应该担心的第二件事是使用serialize()方法。

你应该尝试的是：

$(this).serialize();

正如文件中所述：http://api.jquery.com/serialize/

Answer 3

html表单是什么样的？是否在打开对话框时生成了fancybox对话框的内容，或者是正在显示的隐藏div。我经常在fancybox 2对话框中使用表格。

您可能想尝试在事件上使用jquery并绑定到目标。这将绑定到正文，但要注意具有类.edit-post的表单发生的任何提交事件。这样你就可以随时加载表单，它仍然会被处理。

$("body").on("submit", ".edit-post", function(e) {

    var dataString = $this.serialize();


if (collection_create_input == "true") {
    $.ajax({  
        type: "POST",  
        url: "checkcollection.php",  
        data: dataString,
        async: false,
        success: function(data) {
          $(this).parent(".modal-content").find("#field1secondary").show();
        }
    });
}

        e.preventDefault();

    });

Answer 4

我建议使用jquery表单插件

http://malsup.com/jquery/form/

虽然这也可以通过iframe实现，但更好的是这个插件。

Answer 5

在浏览器控制台中，检查XHR请求和响应。这应该有助于调试问题。如果没有回应。确保你的jquery正在为这个函数工作，并且没有冲突。另外，尝试提醒（“工作”）;在每个代码行之后。这应该可以帮助您找到破损的部分。

Answer 6

尝试return false如下。您还可以使用HTML标记更新您的问题吗？

$(".edit-post").submit(function(e) {
    var dataString = $(this).serialize();
    if (collection_create_input == "true") {
    $.ajax({  
        type: "POST",  
        url: "checkcollection.php",  
        data: dataString,
        async: false,
        success: function(data) {
          $(this).parent(".modal-content").find("#field1secondary").show();
        }
    });
    return false;
    }
});

使用AJAX提交表单

6 个答案: