js如何实现多个相同的form列表提交

去掉form改用ajax提交直接去行内的数据提交

能否给个Demo或者相关资料看下，刚接触web，需学习

可能是我没说清楚：页面总共有50多条这样的数据，如何通过代码来实现页面展现，而不必手动写很多form，应为form就是字段的value值不同而已，你这个也写了3个form。并且自动生成的50多条数据，某条数据都可点击提交到服务器

后台循环输出就可以了可能是我没说清楚：页面总共有50多条这样的数据，如何通过代码来实现页面展现，而不必手动写很多form，应为form就是字段的value值不同而已，你这个也写了3个form。并且自动生成的50多条数据，某条数据都可点击提交到服务器

我这只截取了4条数据，总共有50多条：<div class="row">
<div class="photo"><img src="img/a.jpg" /></div>
<form method="post" name="submit" class="form" style="height: 100px" action="jiangwang.php?action=submit">
<input class="food" type="text" name="food_name" value="冬菇蒸肉饼饭" readonly/>
<input class="price" type="text" name="food_price" value="15" readonly/>
<input type="submit" name="sumbit" value="提交" />
</form>
</div>
<div class="row">
<div class="photo"><img src="img/b.jpg" /></div>
<form method="post" name="submit" class="form" style="height: 100px" action="jiangwang.php?action=submit">
<input class="food" type="text" name="food_name" value="小炒肉" readonly/>
<input class="price" type="text" name="food_price" value="16" readonly/>
<input type="submit" name="sumbit" value="提交" />
</form>
</div>

<div class="row">
<div class="photo"><img src="img/c.jpg" /></div>
<form method="post" name="submit" class="form" style="height: 100px" action="jiangwang.php?action=submit">
<input class="food" type="text" name="food_name" value="冬菇蒸土鸡饭" readonly/>
<input class="price" type="text" name="food_price" value="17" readonly/>
<input type="submit" name="sumbit" value="提交" />
</form>
</div>
<div class="row">
<div class="photo"><img src="img/a.jpg" /></div>
<form method="post" name="submit" class="form" style="height: 100px" action="jiangwang.php?action=submit">
<input class="food" type="text" name="food_name" value="香辣鲳鱼饭" readonly/>
<input class="price" type="text" name="food_price" value="17" readonly/>
<input type="submit" name="sumbit" value="提交" />
</form>
</div>想通过代码一跳转到这个页面，就自动显示着50多条数据(每条数据用户还是要能看见的，并且可以操作点击的)。有一个映射表作为数据来源

$(function(){
    $.post("xxx.action",function(data){
   $.each(data,function(x,i){
   var str = "<div class="row"> "+
     "<div class=\"photo\"><img src="x.img" /></div>"+
         "<input class=\"food\" type=\"text\" name=\"food_name\" value="+x.food+" readonly/>"+
         "<input class=\"price\" type=\"text\" name=\"food_price\" value="+x.price+" readonly/>"+
         "<input type=\"submit\" name=\"sumbit\" value=\"提交\" /></div>" ;
                $("#showInfo").append(str) ;
   }) ;
   });    }) <div class="row" id="showInfo"></div>

请问：怎样实现页面已加载就调用function，xxx.action是表示具体的某个跳转url如jiangwang.php.function(x,i)这些参数是怎样传进来的？

请问：这里ajax是为了和后台通信。现在只是想前端用代码自动生成50多行的菜单的html页面，每行显示：图片、名称、价格和一个提交按钮；数据由一个映射表提供，手动写html就太麻烦了。这个前端怎样实现？

可以实现，你要有数据拼接html
请问：这里ajax是为了和后台通信。现在只是想前端用代码自动生成50多行的菜单的html页面，每行显示：图片、名称、价格和一个提交按钮；数据由一个映射表提供，手动写html就太麻烦了。这个前端怎样实现？

你好，能否帮忙实现下：数据你可以随便写几组就可以，谢谢。如json格式：{ "jiangwang": [{ "phote": "a.png", "name":"鱼香茄子", "price": "15", "btn":"提交" },{ "phote": "b.png", "name":"小", "price": "18", "btn":"提交" }{ "phote": "c.png", "name":"炒", "price": "15", "btn":"提交" }
.......
.......
]}

谢谢！再问下：<a href="dynacform.html"></a>通过这样链接文件到dynacform.html，这文件放在服务器上，是跑代码自动生成的html，为什么这种链接后页面没有自动生成，单独将改文件本地网址放在浏览器会自动生成。
dynacform.html内容：<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>菜单界面</title>
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"/>
<link href="css/main.css" type="text/css" rel="stylesheet"/> <script type="text/jscript" src="js/jquery-1.11.2.js"></script>
<script> $(document).ready(function()
{
var data={ "jiangwang": [
{ "phote": "a.jpg", "name":"鱼香茄子", "price": "15", "btn":"提交" },
{ "phote": "b.jpg", "name":"小", "price": "18", "btn":"提交" },
{ "phote": "c.jpg", "name":"炒", "price": "15", "btn":"提交" },
{ "phote": "a.jpg", "name":"鱼香茄子", "price": "15", "btn":"提交" },
{ "phote": "b.jpg", "name":"小", "price": "18", "btn":"提交" },
{ "phote": "c.jpg", "name":"炒", "price": "15", "btn":"提交" },
{ "phote": "a.jpg", "name":"鱼香茄子", "price": "15", "btn":"提交" },
{ "phote": "b.jpg", "name":"小", "price": "18", "btn":"提交" },
{ "phote": "c.jpg", "name":"炒", "price": "15", "btn":"提交" },
]};

var d=$('#tb');
for(var i=0;i<data.jiangwang.length;i++){
var dd=$('<div class="row"></div>');
d.append(dd);
var v=data.jiangwang[i];
alert(v.phote);
dd.append('<div class="photo"><img src="img/'+v.phote+'" /></div>');
dd.append($('<input class="food" type="text" name="food_name" readonly/>').val(v.name));
dd.append($('<input class="price" type="text" name="food_price" readonly/>').val(v.price));
dd.append($('<input type="submit" name="sumbit"/>').val(v.btn));
}
});
</script>
</head> <div id="tb"> </div>
</body>
</html>$(document).ready(function()是这个函数问题吗？

谢谢。是我漏了jquery-1.11.2.js这个文件。
请问：暂时将每行改为form表单输出(我知道这种方法很笨)： var d=$('#tb');
for(var i=0;i<data.jiangwang.length;i++){
var dd=$('<div class="row"></div>');
d.append(dd);
var v=data.jiangwang[i];
dd.append('<div class="photo"><img src="img/'+v.phote+'" /></div>');
dd.append('<form method="post" name="submit" class="form" style="height: 100px" action="dynacform.php?action=submit">');//增加form
dd.append($('<input class="food" type="text" name="food_name" readonly/>').val(v.name));
dd.append($('<input class="price" type="text" name="food_price" readonly/>').val(v.price));
dd.append($('<input type="submit" name="sumbit"/>').val(v.btn));
dd.append('</form>');//增加form
}但是用开发人员工具查看源码：<DIV class=row>
<DIV class=photo><IMG src="http://127.0.0.1:8020/dinner/img/a.jpg"></DIV>
<INPUT class=food value=鱼香茄子 readOnly name=food_name>
<INPUT class=price value=15 readOnly name=food_price>
<INPUT value=提交 type=submit name=sumbit></FORM></DIV>这样就不是表单格式了。
请问的应该是： <div class="row">
<div class="photo"><img src="img/a.jpg" /></div>
<form method="post" name="submit" class="form" style="height: 100px" action="jiangwang.php?action=submit">
<input class="food" type="text" name="food_name" value="冬菇蒸肉饼饭" readonly/>
<input class="price" type="text" name="food_price" value="15" readonly/>
<input type="submit" name="sumbit" value="提交" />
</form>
</div>请问代码自动生成该怎样修改？

谢谢，再问下：最后怎么多出来一个：<DIV class=row></DIV>。循环次数也没问题，能进入循环才会输出这个。

检查下你的代码
嗯，发现JSON数据jiangwang长度值问题，i<data.jiangwang.length-1;需减1才对.
谢谢大侠你了

你好，按照上面这方法开始处理后台数据。随便点击一个提交按钮，click(function())并没有执行，是通过加alert("click");验证没跑的： $('.row input[type=submit]').click(function(){
alert("click");
var r=$(this).parents('.row');

是可以的，可能是我在script加了两个函数原因

调试易

js如何实现多个相同的form列表提交

解决方案 »