javascript - 使用 JavaScript 创建动态 HTML 表单

Question

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

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

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

处理此问题的最佳方法是什么？我正在考虑遍历用户并仅使用文本输入类型显示它们，但后来我不知道如何使用表单数据发送 POST 请求!

任何帮助将不胜感激

Answer 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();
    });