在表单中实现ajax save

Question

我正在实施虚拟游览应用程序，并希望在游览构建过程中添加ajax功能。

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

所以页面目前看起来像

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

继续拍摄n张照片。

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

具体来说，

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

当#save有一个数字添加到最后时，

将无效。

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

Answer 1

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

像这样：

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

请确保将课程添加到每个保存按钮。

Answer 2

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

---

看起来你正在使用jQuery，但在我进入“jQuery Way”之前，我会先讨论一下vanilla方法

您的目标有两个：首先，区分表单，以便您可以跟踪哪些表单正在执行哪些操作，其次，您希望通过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。这可能是令人惊讶的，因为IFRAME有一个糟糕的说唱，但在这种情况下，你将使用一个隐藏的模拟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-Examples - 对于jQuery

http://mootools.net/forge/p/form_upload - 对于mootools（华友世纪！）

不要理解你 为此使用库 - 使用上面的伪代码作为基础，滚动你自己完全不需要的东西并不是很困难并且需要没有笨重的库开销。

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