使用jQuery提交表单并在现有的div中显示结果。

Question

我有一个简单的文本输入表单，当提交时需要获取一个PHP文件（将输入传递给该文件），然后取得结果（仅为一行文本）并将其放置在一个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的结果动态加载到名为created 的div中。我有jquery表单脚本，但一直无法正确使用它。不过我已经加载了该库（文件）。

- mrpatg

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
});

- Paolo Bergantino

---

而且，既然他想要：create.php?url=INPUT - 他应该将表单方法设置为“GET”。 - sirrocco

我认为那只是他描述应该发送的数据。表单的方法说POST，所以我认为他想要那个。 - Paolo Bergantino

太神了！这就是我一直在找的。对于每天在许多网站上都可以看到的一个如此简单的问题，网上几乎没有什么文档或示例。 - Robert Johnstone

我很喜欢你包括了如何使用表单方法、动作和URL的方式。大多数人可能只会通过硬编码这些值来给出一个例子... - gloomy.penguin

这真的救了我的命。另外，如果你需要替换表单上方的文本，只需将文本放在表单顶部，即在<form>标签内部。它应该呈现相同的效果，除非有一些奇怪的CSS控制表单内文本的东西。 - Brian Peat

要使其工作，您必须在上述代码后调用 $('#create').submit(); 以触发它。$('#create').submit() 是 .on(submit, ... 的快捷方式。 - François Constant

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

        }
    });        

});

- Shaiful Islam

Answer 3

如果您不希望页面刷新，必须使用AJAX来提交表单。

$('#create').submit(function () {
    $.post('create.php', $('#create').serialize(), function (data, textStatus) {
         $('#created').append(data);
    });
    return false;
});

- RaYell

---

捕获提交按钮的点击事件不是捕获表单提交的正确事件。您需要捕获表单的提交事件。 - Paolo Bergantino

我尝试了这个，但是当我点击提交时它会带我到create.php页面。 - mrpatg

return false; 语句应该可以阻止这种情况发生。 - cartbeforehorse