0

我正在实现一个虚拟旅游应用程序，并希望将 ajax 功能添加到旅游构建过程中。

我在页面上有许多迷你表单，其数量由指定目录中的图像数量决定。

所以页面目前看起来像

---------------------------------------------------
|             |           Location   
|             |           Latitude
|  Thumb      |           Longitude       --------
|             |                           | Save |
|--------------                           --------
|
---------------------------------------------------
---------------------------------------------------
|             |           Location   
|             |           Latitude
|  Thumb      |           Longitude       --------
|             |                           | Save |
|--------------                           --------
|
---------------------------------------------------
---------------------------------------------------
|             |           Location   
|             |           Latitude
|  Thumb      |           Longitude       --------
|             |                           | Save |
|--------------                           --------
|
---------------------------------------------------

并继续拍摄 n 幅图像。

我想做的是让保存按钮执行一个ajax函数来保存信息而不刷新页面。我的问题与按钮 ID 有关。由于表单是通过循环中的 PHP 回显语句呈现的，我可以将循环编号添加到按钮 ID，但是如何在 jquery 函数中使用所述 ID？

具体来说，

$("#save").click(function(){
  //ajax POST code goes here
});

#save当末尾添加数字时将不起作用。

我还有哪些其他选项可以为这些表单实现 ajax 功能？

4

2 回答 2

2

我会为每个按钮添加一个类，然后将单击事件附加到该类，然后以这种方式找到 ID。然后你可以运行你的 AJAX。

像这样：

$('.buttonClass').click(function (){
    var id = this.id;
    var $thisButton = $('#' + id);
    //Can do jQuery stuff with $thisButton now
    //Run AJAX
});

只需确保将类添加到每个保存按钮即可。

于 2012-06-06T18:13:33.910 回答
1

编辑 我可能误解了你的问题——我以为你想通过这些表格上传图片。我的答案的第一部分适用，第二部分可能不相关。您仍然可以使用该方法，即使使用您拥有的表单（没有文件元素），但对于您的用例，还有其他方法可能更“常见”。

看起来你正在使用 jQuery，但在我进入“jQuery 方式”之前，我将讨论这个的香草方法

您的目标是双重的：首先，区分表单，以便您可以跟踪哪个 for 正在做什么，其次，您希望通过IFRAME模拟 AJAX 式表单提交来提交您的表单。

第一部分很简单：为表单元素、按钮和容器本身使用某种唯一标识符：

<div class="oneFormContainer oneFormContainerGTRX2">
    <form class="oneForm oneFormGTRX2" id="GTRX2">
         <!-- form elements -->
        <button class="oneFormButton onFormButtonGTRX2" rel="GTRX2">Submit</button>
    </form>
</div>

在这个例子中，整个 shebang 有一个唯一标识符“GTRX2”（一个随机字符串），所以我把它作为一个类放在每个元素上。我更喜欢处理类而不是 id，但大多数情况下你可以用 id 做同样的事情。这里的底线是，当单击按钮时，可以读取rel属性并快速定位关联的容器（显示加载消息）和关联的表单（提交）。

正如我所提到的，这里目标的第二部分是将表单提交到IFRAME. 这可能会令人惊讶，因为IFRAMEs 的 rap 很差，但在这种情况下，您将使用隐藏的来模拟 AJAX 请求——也就是说，您将使用普通形式的帖子，但它会发生与页面加载异步。这种策略是必需的，因为使用 AJAX 的标准 XHR 方法，无法提交文件。

在伪javascript中，然后：

onPageLoad {
    // add a 'click' event to all elements with the class "oneFormButton"
    document.body.getElementsByClassName('oneFormButton').addEvent('click', handleFormUpload);
}
handleFormUpload {
    var uid = clickedButton.get('rel');
    var form = document.getElementByClassName('oneForm'+uid);
    var container = document.getElementByClassName('oneFormContainer '+uid);

    // make a hidden iframe element, add to body
    var iframe = createElement('iframe');
    iframe.id = 'ajFormSubmitFrame'+uid;
    iframe.name = 'ajFormSubmitFrame'+uid;
    iFrame.style.position = 'absolute';
    iFrame.style.top= '-9000';
    iFrame.style.left= '-9000';
    iFrame.style.width= '10px';
    iFrame.style.height= '10px';
    document.body.appendChild(iFrame);

    // tell the form to target the iframe
    form.target = 'ajFormSubmitFrame'+uid;

    // add an onload event to capture the return
    iFrame.addEvent( 'load', uploadCallback );

    // show some kind of loading message
    showLoader(container);

    // submit the form
    form.submit();
}

uploadCallback  {
  // deal with the response

  // and be sure to remove that iFrame, reset the target property of your form, and clean up the loading message
}

哇！了解了所有这些之后，流行的库通常会将其封装成某种魔法。你有这些：

http://valums.com/ajax-upload/ - 对于 jQuery http://pixeline.be/experiments/jqUploader/ - 对于 jQuery http://www.fyneworks.com/jquery/multiple-file-upload/#tab -示例- 用于 jQuery

http://mootools.net/forge/p/form_upload - 对于 mootools（万岁！）

不要认为你必须为此使用一个库——使用上面的伪代码作为基础，推出你自己的伪代码并不难，它完全符合你的需要，而没有笨重的库开销。

此外，您还FileReader需要考虑新的 API（超出此答案的范围），请参阅文档以获取示例：https ://developer.mozilla.org/en/DOM/FileReader

于 2012-06-06T18:31:54.117 回答