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

我有一个简单的单文本输入表单，提交时需要获取一个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表单脚本，但我一直无法使它正常工作。但是我确实加载了库（文件）。

如果不想刷新页面，必须使用AJAX发布表单

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

---

这段代码应该可以做到这一点。您不需要表单插件来完成以下简单的事情：

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

---

这也适用于文件上传

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

        }
    });        

});

---

捕获提交按钮的单击事件不是表单提交的适当事件。您希望捕获表单的提交事件。我尝试了此操作，但当我单击submit时，它会将我带到create.php页面应该可以防止这种情况发生。既然他想要：create.php？url=INPUT-他应该将form方法设置为“GET”，我想这只是他描述应该发送的数据。表单的方法是POST，所以我假设他想要。上帝喜欢！！！正是我想要的。对于这样一个用户每天在任何数量的网站上看到的简单问题，web上几乎没有关于的文档/示例。我喜欢你如何包括使用表单方法、操作和url的方式。大多数人都会通过硬编码这些值给出一个例子……这救了我的命。此外，如果表单上方有需要替换的文本，只需将文本粘贴在表单顶部，就在标记内部。它应该呈现相同的效果，除非表单中有一些奇怪的css控制文本。