从 JsonData 创建 HTML 表单并使其可编辑答案

【问题标题】：Create HTML form from JsonData and make it editable从 JsonData 创建 HTML 表单并使其可编辑
【发布时间】：2015-08-31 19:35:35
【问题描述】：

我有一组 JSON 格式的键值。

{
  "name": "John",
  "age": 23,
  "address": "Lorem ipsum"
  ...
  ...
}

我需要从中创建一个可编辑的表单。主要的挑战是我有 100 个这样的 JSON 格式的键值对。要求是使用 GET 请求重新提交表单。只需提交用户已编辑的字段。

例如如果用户对“name”=“pete”和age=24进行编辑，我需要使用http://www.example.com/name=pete&age=24创建一个请求

由于键值对的数量非常多，我无法在每次用户编辑某个值时将所有键值提交给服务器。

【问题讨论】：

你好，你能举个例子清楚地解释你的要求吗
旧值如何以及从何而来？到目前为止你尝试了什么，它是如何失败的？

标签： javascript jquery html

【解决方案1】：

有几个库可以做到这一点。也是一种简单的获取方式，你可以：

function paramsToJSON(){
	var search = location.search.substring(1), json_get;
	try{
		json_get = JSON.parse('{"' + decodeURI(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}')
	}catch(e){}

	return json_get || {};
}

var myJSON = {"name": "John", "age": 23, "address": "Lorem ipsum"};
var json = $.extend(myJSON, paramsToJSON()), changes = {};

$(document).ready(function(){

	for(var key in json){
		var element = $("<input>", {type: "text", name: key, value: json[key]});
		var label = $("<label>").append(key).append(element);

		element.bind("keyup change", function(){
			changes[$(this).attr("name")] = $(this).val();
		});

		$("#fields").append(label)
	}

	$("#myForm").submit(function(e){
		for(var x in json){
			if(!changes.hasOwnProperty(x) || changes[x] == json[x]){
				$("input[name='"+x+"']").prop("disabled", true)
			}
		}
	});
})

label {display:block; text-transform: capitalize;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<form id="myForm"></form><form id="myForm" method="get">
	<div id="fields"></div>
	<input type="submit" />
</form>

【讨论】：

我面临的主要挑战是重新提交仅包含用户编辑的值的表单。例如，如果“name”被编辑，我们不会重新提交所有字段，我们只是将“name”作为 get 参数发送到服务器。不知何故，被编辑的值需要某种跟踪。
没有 php。所有这些都只能是客户端。
@nirmeshkhandelwal 为避免发送某些字段的值，您必须禁用表单元素。我更新了演示，看看。尝试本地

【解决方案2】：

buildForm = function(formJSON) {
   for(var key in json) {
      $("#myForm").append("<label name='"+key+"' >"+key+"</label>");
      $("#myForm").append("<input type='text' name='"+key+"' value='"+value+"' >");
    }
}

// if your json like this
var json = {
  "name": "John",
  "age": 23,
  "address": "NY"
};
buildForm(json);

【讨论】：