将50字段表单提交到多个表;常规POST，AJAX POST或其他？ [英] Submitting a 50 field form to multiple tables; regular POST, AJAX POST or other?
问题描述
Stackoverflow的长时间阅读器;第一次海报，所以希望你会温柔：）
Long time reader of Stackoverflow; first time poster, so hope you'll be gentle :)
我在一个页面上有一个表格，包括大约50个不同类型的字段（复选框/文本/十进制/日期等等）。这些值通过一个查询从大约8个表中拉入，大致如下：
I have a form on a page consisting of about 50 fields of varying types (checkboxes/text/decimal/date etc. etc.). The values are pulled in from about 8 tables through one query roughly like so:
SELECT * FROM p
LEFT JOIN pd on p.id=pd.id
LEFT JOIN pc on p.id=pc.id
LEFT JOIN pie on p.id=pie.id
etc.
WHERE p.id = xxx
我开始了一天的想法，我只是在表单上使用一个简单的POST ，写一堆验证和更新查询（覆盖每一个现有的价值与任何形式），并与它完成，但我质疑我的判断在这里。
I started the day thinking I'd just use a simple POST on the form, write a bunch of validation and update queries (overriding every single existing value with whatever is in the form) and be done with it, but I am questioning my judgement here.
具体来说，如果一个已经存在的值没有改变，我觉得是错误的，而且我担心如果数据库更新失败， （思考处理与交易）。我对这个较小的形式很舒服，但如果工作人员只改变了1或2个字段，这感觉像很多写作没什么。我接下来的想法是使它的AJAX基于每个字段级别。更改任何字段将提交更改并保存。感觉像它可能更有意义，即使我宁愿避免js，如果我可以。第三个选项当然是将它变成具有多个提交按钮的多个表单，例如每个选项卡一个表单（表单已经分成标签），其缺点是更频繁地重新加载页面，因为它需要更多的提交（虽然这里当然可以使用AJAX）。
Specifically, it feels wrong to be overriding an existing value if it hasn't changed, and I'm slightly worried about what happens if the db updating fails half way through (thinking of handling that with Transactions). I am comfortable with this on smaller forms, but if staff has only changed 1 or 2 fields, this feels like a lot of writing for nothing. My next thought then was to make it AJAX based on a per field level. Changing any field submits the change and saves it. Feels like it might make more sense, even if I'd prefer to avoid js if I could. A third option of course is to turn it into multiple forms with multiple submit buttons, say one per tab (the form is already divided up into tabs), with the downside then being reloading the page more often as it needs more submitting (though here too AJAX could of course be used).
我应该把这么多的想法（花了更好的一天，到目前为止阅读老线程在这里...）？这里有一些财务数据，所以我的主要关注的是可靠性和性能，但我也很好奇，如果有任何其他人追踪的最佳实践。
Should I even be putting this much thought into it (spent the better part of the day so far reading up on old threads here...)?! There's a bit of financial data involved here, so my main concerns are reliability and performance, but I'm also curious if there is any kind of best practice that others follow?
--- UPDATE AFTER IMPLEMENING CHOSEN ANSWER BELOW ---
--- UPDATE AFTER IMPLEMENTING CHOSEN ANSWER BELOW ---
作为一个很长时间的读者，我总是很欣赏那个提问的人跟进的线程上，所以想我会这样做自己。不确定正确的协议或格式。
Being a long time reader of SO, I always appreciate the threads where the person asking the question follows up later on, so thought I'd do so myself. Not sure of correct protocol or formatting.
如上所述，我最终使用barnyr的解决方案，它基本上使用javascript来将提交时的表单与原始值进行比较，然后将更改发布到mysql jquery post）。如果你正在考虑一个类似的场景，这里有一些事情要考虑：
As per above, I ended up going with barnyr's solution, which essentially uses javascript to compare the form on submit with the original values and then posts the changes to mysql (using jquery post). Here's some things to think about if you are considering a similar scenario:
-
关于bat，jquery的序列化不发送复选框/如果未选择，则为无线电值。我看到他们的逻辑，但对我来说这没有意义。我在使用该插件，http：//tdanemar.wordpress .com / 2010/08/24 / jquery-serialize-method-and-checkboxes / 来解决此问题。
如果您在页面上编辑值，请保存，然后再次编辑，恢复为原始值，消息与在页面加载时设置的初始值相比，没有发生变化。这是合乎逻辑的，但我没有考虑这一点，直到我做完和测试。我真的没有看到任何方式，这将保证这个解决方案的复杂性通过一个简单的覆盖一切提交，所以如果你正在建立一个公共应用程序，你在乎你的用户，我不会建议您使用这种方法。
If you edit a value on the page, then save it and then edit it again, back to the original value, you will get a 'nothing changed' message as compared to the initial values set on page load, nothing has changed. It's logical, but I hadn't considered this till after I was all done and testing. I don't really see any way around this that would warrant keeping the complexity that comes with this solution over a simple 'override everything on form submit', so if you are building a public application where you care about your users, I would NOT recommend you use this methodology.
在标准化方面，这个解决方案很漂亮，因为我可以将行添加到链接到包含userid的主表的表，除非将内容添加到这些具体领域。然而，如果点2对我来说是一个大问题，它会从代码中减少很多复杂性，只是将一个大表单中显示的所有值存储在一个大表中。我几乎是一个新手的wrt规范化（所以在干草叉上轻松），这当然主要是所有的数据以一种形式显示的结果。如果您使用多个表单，则不再适用。
In terms of normalization, this solution is beautiful as I can keep rows from being added to tables linked to the main one containing userid, unless content is added to those specific fields. However, if point 2 was a big issue for me, it would cut a lot of complexity out of the code to just store all these values displayed in the one big form in one big table. I'm pretty much a newbie wrt normalization (so go easy on the pitchforks) and this is of course mainly a consequence of all data being displayed in just one form. If you are using multiple forms, this no longer applies.
部分系统涉及大量数字，在表单的其他部分进行汇总，通过AJAX进行所有这些操作意味着您必须非常小心并清除当用户点击保存时正在改变的内容。例如，他们可以更改程序价格，总价格也应该更新，但是当你通过AJAX提交，没有适当的重新加载，你必须将所有这些都写回系统。
Part of the system involves a lot of numbers, summed in other parts of the form, and doing all of this via AJAX means you have to be very careful and clear on what exactly is changing when the user hits save. For example they can change the program price, and the total price should also update, but as you are submitting via AJAX and there is no proper reload, you have to code all this back into the system.
点2,3和4可以在这种情况下工作，但是我知道我开始的时候知道，我可能会去一个包含所有数据的大表，以及在表单提交时简单编辑整个行。再次，我会学到很少，所以没有遗憾:)希望这是对那些发现这个线程在稍后阶段的帮助。
Points 2,3 and 4 could be worked around in this case, but had I known what I know now when starting, I probably would have gone with one big table with all data, and a simple edit entire row on form submit. Then again, I would have learned a lot less, so no regrets :) Hope this is of help to those finding this thread at a later stage.
推荐答案
UPDATE - 初始方法没有处理其他输入类型这么好。我改变了代码来处理常见的输入类型以及使用DOM属性的初始值，这避免了在页面加载时运行任何代码：
UPDATE - the initial approach didn't handle other input types so well. I've changed the code to handle common input types as well as using DOM properties for initial values, which avoids having run any code on load of the page:
这里是链接： http://jsfiddle.net/rLwca/5/ ，以下是更新的功能：
Here's the link: http://jsfiddle.net/rLwca/5/ and here's the updated function:
//Initial setup no longer needed. the DOM has the default states anyway...
//heres where we filter the elements for ones which have changed
$("#My50PageForm").submit(function(){
var elems = $("#My50PageForm :input").filter(function(value){
var elem=$(this),
type=this.tagName +"_"+(elem.attr("type")||""); // uniquely name the element tag and type
switch (type){
case "INPUT_radio": case "INPUT_checkbox":
return elem.prop("checked")!=elem.prop("defaultChecked");
case "INPUT_text": case "INPUT_textarea": case "INPUT_":
return elem.val()!=elem.prop("defaultValue");
case "SELECT_":
var options=$(this).find('option'),
defaultValue=options.first().val(); //use the first element's value as default in case no defaults are set
options.each(function (i,o) {
defaultValue=this.defaultSelected?this.value:defaultValue;
});
return $(this).val()!=defaultValue;
default:
console.log("type "+type+" not handled");
return false;
}
});
if(elems.length){
console.log(elems.serialize());
return false;
$.post("http://jsfiddle.net/example.cfm",
elems.serialize());
}else{
alert("nothing changed");
}
return false;
});
以下原始代码：
链接到发送变更的最小示例：
Here's a link to a minimal example of sending what's changed:
$(document).ready(function(){
//Copy all form valued into a data attribute called 'original' when the page loads
$("#My50PageForm :input").each(function(elem){
$(this).data("original",$(this).val());
});
//here's where you check what has changed
$("#My50PageForm").submit(function(){
var elems = $("#My50PageForm :input").filter(function(value){
var elem=$(this),
original=elem.data("original");
console.log(original);
//check that original isn't 'undefined' and that it's been changed
return original && elem.val()!==original
});
if(elems.length){
//post the data back to your server for processing
$.post("http://jsfiddle.net/example.cfm",
elems.serialize());
}else{
alert("nothing changed");
}
return false;
});
});
关键是：
- 加载网页时，使用jQuery在提交时触发每个表单域的初始值的副本
- ，将每个字段的当前值与在页面加载时保存。
- 如果有更改，请将数据发回服务器。
其他方法可能允许发布整个表单：
Other approaches might be, allowing the whole form to be posted:
- 在会话中将数据存储在服务器上
- 重新运行用于填充页面的选择，然后将其与您的表单发布的内容进行比较
这篇关于将50字段表单提交到多个表;常规POST，AJAX POST或其他？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
