从JsonData创建HTML表单并使其可编辑 [英] Create HTML form from JsonData and make it editable

问题描述

我有一组JSON格式的键值。

  {
name：John ，
age：23，
address：Lorem ipsum
 ... 
 ... 
} 
  

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

例如。如果用户对name=pete和age = 24进行编辑，则需要使用 http://www.example.com/name=pete&age=24

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

解决方案

有几个库要做到这一点。还有一个简单的方法来获取它，您可以：

function paramsToJSON（）{var search = location.search.substring（1）， json_get;尝试{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）。 {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 =myFormmethod =get> < div id =fields>< / div> < input type =submit/>< / form>

I have set of key-value in JSON format.

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

I need to create an editable form from this. The main challenge is that I have 100's of such key-value pairs in JSON format. The requirement is to resubmit the form using GET request. Only the fields that have been edited by user has to be submitted.

e.g. if an user makes an edit to "name" = "pete" and age = 24, I need to create a request with http://www.example.com/name=pete&age=24

Since the number of key-value pairs is very large, I cannot submit all the key-values to server every time an user edits some value.

解决方案

There are several libraries to do that. Also a simple way to get it, you can be:

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>

这篇关于从JsonData创建HTML表单并使其可编辑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！