在加载时提交 ajax 表单答案

【问题标题】：Submit ajax form on load在加载时提交 ajax 表单
【发布时间】：2011-12-13 17:24:39
【问题描述】：

我有一个页面可以生成 n 个 ajax 表单，每个摄像头一个。在提交时，每个都会加载一个 div，其中包含来自每个相机的图片。我想在表单加载时提交它们。

到目前为止，我有这个，取自表单在提交时已经执行的操作，减去将提交按钮绑定到 ajax 事件的点击事件。

这是 HTML（删除了一些 CakePHP div 汤）

<div id="CameraContainer">

    <form action="/Cameras/ajaxPicture" id="CameraShowForm" method="post" accept-charset="utf-8">
        <input type="hidden" name="_method" value="POST" />
        <input type="hidden" name="data[Camera][camera]" label="Images:" value="CS011" id="CameraCamera" />
        <label for="datepicker_value">Date: </label><input name="data[Camera][date]" type="text" id="datepicker_value" value="12/13/2011 12:00:00" />
        <input type="hidden" name="data[Camera][count]" label="Images:" value="2" id="CameraCount" />
        <input id="submit-490507801" type="submit" value="Load Pictures" />
    </form>
</div>

<div id="ajaxPicture1" class="ajaxPicture"></div>

还有 Javascript：

    $(document).ready(function () {
    $.ajax({data:$(".CameraContainer").closest("form").serialize(),
        dataType:"html",
        success:function (data, textStatus) {$("#ajaxPicture1").html(data);},
        type:"post",
        url:"\/cameras\/ajaxPicture"
    });

        return false;});

这些都针对 n 个相机容器进行了迭代，每个容器都有一个唯一的 ajax div 和CameraContainer div 用于表单。目前<script> 在循环内，但如果我可以在页面末尾加载它会更好。

这是从我的框架生成的代码中获取的，所以我不完全理解它；我想要它（尽管它会）做的是获取最接近 id 为 CameraContainer 的元素（表单在此元素内），序列化此数据并将其提交给我的 ajax 函数，该函数位于/cameras/ajaxPicture。但是它发送给该函数的数组是空的，因此该函数不返回任何结果。

如何获取最近的 Ajax 表单并将其提交给给定元素（并将其加载到容器 div 中）？

【问题讨论】：

为什么要在页面加载时提交表单帖子？
预填充表单，根据时间从每个相机加载图片，并设置默认时间。在页面加载时，您将获得几个表格以及来自每个相机的几张照片作为示例。我也可以在服务器端执行此操作，但我认为这是最有意义的，并保持第一个图像请求与所有其他图像请求相同。

标签： javascript jquery html

【解决方案1】：

你应该使用

$("#CameraContainer").find("form").serialize()

CameraContainer 是一个 ID，所以 # 而不是 .
您不会搜索靠近 CameraContainer 的元素，而是搜索 CameraContainer 中的元素，因此请使用 find 函数

看看我的example

【讨论】：