从javascript形成json并动态更新内容_Javascript_Jquery_Html_Json

从javascript形成json并动态更新内容

javascript jquery html json

从javascript形成json并动态更新内容,javascript,jquery,html,json,Javascript,Jquery,Html,Json,我想从页面中获取坐标（与id关联），并将其存储在json文件中。用户应该能够添加或删除更多ID 基本上，如果我右键单击页面，就会弹出一个输入字段——我在该字段上键入的任何内容（即ID）以及x和y坐标都应该保存在json文件中文件应采用以下格式： {“传感器1”：{“x”：121，“y”：23}，“传感器2”：{“x”：232，“y”：131}……} 我使用右键单击功能的上下文菜单，并能够获得x和y坐标（以下代码中的pos.x和pos.y）。我现在需要将这些动态保存在json文件中（用户应该能够

我想从页面中获取坐标（与id关联），并将其存储在json文件中。用户应该能够添加或删除更多ID

基本上，如果我右键单击页面，就会弹出一个输入字段——我在该字段上键入的任何内容（即ID）以及x和y坐标都应该保存在json文件中

文件应采用以下格式：

{“传感器1”：{“x”：121，“y”：23}，“传感器2”：{“x”：232，“y”：131}……}

我使用右键单击功能的上下文菜单，并能够获得x和y坐标（以下代码中的pos.x和pos.y）。我现在需要将这些动态保存在json文件中（用户应该能够添加/删除ID）

如何从javascript创建json文件并动态添加或删除内容？帮忙

迄今为止的代码（在页面上单击鼠标右键时获取x和y坐标）：


试验
$（文档）.ready（函数（）{
//单击#myDiv时显示菜单
$（“#myDiv”）。上下文菜单({
菜单：“我的菜单”
},
功能（动作、el、pos）{
变量名称=提示（“传感器Id”，“在此处输入Id”）；
if（name！=null）{
警觉的(
'传感器：'+name+'操作：'+Action+'\n\n'+
'元素ID:'+$（el）.attr（'ID'）+'\n\n'+
'X:'+pos.X+'Y:'+pos.Y+'（相对于元素）\n\n'+
“X:”+pos.docX+“Y:“+pos.docY+”（相对于文档）”
);
}   
});
});
右键单击以添加

您需要使用AJAX将数据发送到服务器，然后服务器才能更新文件。您的服务器端语言是什么？您需要编写一个小脚本，它可以接受包含数据的ajax请求，并相应地修改文件。。所以，我在php文件中发布了一篇AJAX文章，它将根据需要修改/编辑json？我会试试的

<html>

<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery.contextMenu.js" type="text/javascript"></script>
<link href="css/jquery.contextMenu.css" rel="stylesheet" type="text/css"    />

<script type="text/javascript">

    $(document).ready( function() {

        // Show menu when #myDiv is clicked
        $("#myDiv").contextMenu({
            menu: 'myMenu'
        },
            function(action, el, pos) {

            var name=prompt("Sensor Id ","Enter Id here");

            if (name!=null){


            alert(
                'Sensor: ' + name + 'Action: ' + action + '\n\n' +
                'Element ID: ' + $(el).attr('id') + '\n\n' + 
                'X: ' + pos.x + '  Y: ' + pos.y + ' (relative to element)\n\n' + 
                'X: ' + pos.docX + '  Y: ' + pos.docY+ ' (relative to document)'
                );


            }   

        });

    });

</script>

</head>

<body>

<div id="myDiv">
    Right click to add
     <div id='cid' class='container' style="height: 100%">
    <img src="./3.jpg">
    </div>
</div>

<ul id="myMenu" class="contextMenu">
    <li class="edit"><a href="#edit">Place</a></li>
</ul>