jquery 理解 $ ('#name' ).load(...)

Question

我在理解如何完成以下任务时遇到一些困难:基本上，我只是深入研究 Ajax 的世界，并且我已经构建了一个简单的应用程序来练习。我当前的问题是，我希望在“添加条目”下方动态添加一个表单，以便人们不必转到另一个页面来更新页面，该部分可以工作。在“添加条目”下方，有一个所有当前添加条目的列表，在用户单击动态加载的表单上的提交后，我想通过重新加载页面来更新下面的列表(该列表是从数据库生成的)。

为了解释下面的代码，/ajax/addform/加载一个html文件，其中只有...，这是添加条目表单。我只是不确定如何将 $('form').submit 绑定(bind)到新加载的表单。另外，对于 .load()，第二个 var 是等待加载页面的 POST 参数，我是否需要使用它才能使用回调(这是第三个参数)？

这是我所拥有的:

对于初始页面:

<a id="add" href=...>Add Entry</a>
<div id="form"></div>
<ul>--list of entries here--</ul>

其中 div 只是一个放置表单的占位符。

$(document).ready(function (){
    $('#add').click(function (){
        $('#form').load('/ajax/addForm/', {'dummy':'var'},
            function (){
                $('form').submit(function (){
                    return false;
                });
        });
        return false;
    });
});

非常感谢您的帮助!

Answer 1

如果您想向 ajax/addForm/ 发出 ajax 请求，您将不仅仅是提交表单。您将需要获取表单中输入的值。

var textData = $("input[name='text']").val();

您的加载函数将如下所示:

$(/* containing element of list */).load('ajax/addForm/', {'text',textData});

我假设ajax/addForm/输出您列表的html？

编辑:从您的回复中，我了解到您希望使用ajax将数据发送到ajax/addForm，然后重新加载页面(而不是异步更新)。如果您打算这样做，那么在没有 ajax 的情况下完成整个事情可能会更容易，但这里有关于 ajax post 请求的说明。

您将需要再次获取输入的值并将其存储以供 ajax 请求使用。如果您没有从 ajax/addForm 接收到任何数据，则没有理由使用 load()；你应该使用$.post()相反。

$.post('ajax/addForm/', {'text',textData}, function() {
   //reloads the page when ajax/addForm is finished
   window.location.reload();
});

如果您希望在按下按钮时发生这种情况，则需要将 $.post() 放入该按钮的点击处理程序中。