jQuery提交表单，然后在现有的div中显示结果

Question

我有一个简单的文本输入表单，提交时需要获取一个php文件（将输入传递给文件），然后将结果（仅一行文本）放入a div并将其淡入div视图。这是我现在所拥有的：<form id=create method=POST action=create.php><input type=text name=url><input type="submit" value="Create" /> <div id=created></div>我需要的是create.php?url=INPUT要动态加载到被div调用中的结果created。我有jquery表单脚本，但是我无法使其正常工作。但是我确实加载了库（文件）。

Answer 1

此代码应该做到这一点。您不需要像以下这样简单的表单插件：

$('#create').submit(function() { // catch the form's submit event

    $.ajax({ // create an AJAX call...

        data: $(this).serialize(), // get the form data

        type: $(this).attr('method'), // GET or POST

        url: $(this).attr('action'), // the file to call

        success: function(response) { // on success..

            $('#created').html(response); // update the DIV

        }

    });

    return false; // cancel original event to prevent form submitting

});

Answer 2

这也适用于文件上传

$(document).on("submit", "form", function(event)

{

    event.preventDefault();

    var url=$(this).attr("action");

    $.ajax({

        url: url,

        type: 'POST',

        dataType: "JSON",

        data: new FormData(this),

        processData: false,

        contentType: false,

        success: function (data, status)

        {

            $('#created').html(data); //content loads here

        },

        error: function (xhr, desc, err)

        {

            console.log("error");

        }

    });        

});

Answer 3

如果您不希望刷新页面，则必须使用AJAX发布表单。

$('#create').submit(function () {

    $.post('create.php', $('#create').serialize(), function (data, textStatus) {

         $('#created').append(data);

    });

    return false;

});