javascript - 在加载时提交 ajax 表单

Question

我有一个生成 n 个 ajax 表单的页面，每个表单一个。在提交时，每个加载一个包含来自每个相机的图片的 div。我想在加载时提交表单。

到目前为止，我已经有了这个，取自表单在提交时已经采取的操作，减去了将提交按钮绑定(bind)到 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 中)？

Answer 1

你应该使用

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

1. CameraContainer 是一个 id，所以 # 而不是 。

2. 您不搜索靠近 CameraContainer 的元素，而是搜索位于 CameraContainer 中的元素，因此请使用 find功能

看看我的example