以表格形式实现ajax保存

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添加到末尾的数

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

将不起作用。

还有什么其他选项可以实现这些表单的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的方式”

在这里你的目标是双重的：第一，区分因此您可以跟踪哪些内容正在做什么，其次，您希望通过IFRAME提交表单以模拟类似AJAX的表单提交。

第一部分是容易的：使用某种唯一标识符的form元素，按钮，和容器本身：

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

在这个例子中，整个认领具有“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