Question

我有一个简单的文本输入表单，在提交时，需要获取一个php文件（将输入传递给文件），然后获取结果（只是一行文本）并将其放在{{1}中并将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的{{1}}。

我有jquery表单脚本，但我无法让它正常工作。但是我确实加载了库（文件）。

Answer 1

此代码应该这样做。对于像这样简单的事情，您不需要Form插件：

$('#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;
});

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

3 个答案: