Question

我有一套JSON格式的键值。

 [{"k1":"v1"},{"k2":"v2"}].

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

e.g。如果用户对＆＃34; name＆＃34;进行编辑=＆＃34; pete＆＃34;并且年龄= 24，我需要使用http://www.example.com/name=pete&age=24

创建请求

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

2 个答案: