如何使用AJAX提交表单？

我将Ajax与JQUERY一起使用以提交表单。

由于某种原因，我似乎无法运行AJAX。该表格位于fancybox 2模式中，因此我认为可能与该表格有关，但我无法弄清楚。对于在fancybox模式中进行AJAX调用，我需要做些特定的事情吗？

我的代码：collection_create_input是TRUE。

$(".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();

    });

NOTE:

Are you making sure also to include the jQuery library?

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

If you are using ajax in this way, you have to include it, else it won't run.

The very first thing to note here, is

Is collection_create_input true when you send the ajax request?

Because if it is false, it will not execute. And the ajax request won't be made as you want it to be sent.

Second thing that you should worry about is the usage of serialize() method.

What you should try is this:

$(this).serialize();

As it is stated here in the document: http://api.jquery.com/serialize/

What does the html form look like? Is the content of the fancybox dialog being generated at the time the dialog is opened or is a hidden div that is being displayed. I regularly have forms in a fancybox 2 dialog that work.

You may want to try using the jquery on event and bind to a target. This would bind to the body, but watch for any submit event that occurs with forms that have the class .edit-post. That way you can load the form anytime and it will still be processed.

$("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();

    });

I recommend to use jquery form plugin

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

While this can also be achieved via iframes but better would be this plugin.

In browser console, check for XHR request and response. This should help in debugging the problem. If there is no response. make sure your jquery is working for this function and there's no conflict. Also, try alert("working"); after every code line. This should help you to find the broken part.

Try to return false as follows. Also can you update your question with HTML markup?

$(".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;
    }
});