使用javascript创建动态HTML表单

时间:2017-02-26 22:47:22

标签: javascript jquery html json

我一直在谷歌搜索和谷歌搜索,但完全坚持这一点。

我有一个GET请求,它检索包含用户列表的一些JSON。但是,用户列表会发生变化。

我想生成一个简单的HTML表单,其中包含用户的名称,然后是输入字段,以便为其提供评级。然后,我需要收集评级并以JSON发送POST请求。

最好的方法是什么?我正在考虑循环用户并只显示文本输入类型但我不知道如何使用表单数据发送POST请求!

非常感谢任何帮助

1 个答案:

答案 0 :(得分:1)

基于JSON填充UI

HTML:

 <form id="user_list">
  <div>

   </div>
  <input type="submit"/>
 </form>

JS:

var obj = {
  users:[{name:"user 1"},{name:"user 2"}]
}

var user_list = $("#user_list>div");

obj.users.forEach(function(user,index){

    user_list.append("<div>"+
                     "<h1>" + user.name + "</h1>"+
                     "<input type='text' id='user_"+ index +"'/>"+
                     "</div>");
});

将所选值发送到服务器。

  • 选项1

如果您在点击提交时将此页面完整回发,则必须更改文本框,如下所示

"<input type='text' name='[user_"+ index +"]'/>"+

在服务器请求对象中,您将被赋予键/值数组。

  • 选项2

如果您正在计划发出AJAX请求,那么您可以再次循环文本框并在后端构建您想要的JSON格式并通过AJAX。

  $("input[type='text']").each(function(input){
       $(input).val();
    });