Question

我使用jquery动态添加数据。我将把它贴在这里，而不是解释代码。我只需要将组数据单独放入数据库。我必须获取数据并转换为JSON，然后插入数据库。

代码是

<!DOCTYPE HTML>
<html>
<head>
<body>

<style type="text/css">
   .task,
   .added-task {
    margin-left: 50px;
  }

  .added-task .task {
    margin-left: 0px;
  }

  .added-module {
    font-weight: bold;
  }

  .delete-module,
  .edit-module,
  .delete-task,
  .edit-task {
    display: none;
    margin: 0 10px;
  }

  .added-module:hover {

  }


</style>

<form method='post' name='EstimationForm' class="estimationform">

</form>
<a href="Javascript:void(0)" id="add-group">Add Group</a>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">


//Adding new Module

$("#add-group").click(function(){
  var module_length = $(".module").length;
  if(module_length > 0) {
    if($(".module").text() == "") {
        alert("please enter module name");
    }
    else {
        $(".estimationform").append("<div class='new-module'><input type='text' class='module'/><a href='Javascript:void(0)' class='add-new-task'>add Task</a></div><br />");
    }
  }
  else {
    $(".estimationform").append("<div class='new-module'><input type='text' class='module'/><a href='Javascript:void(0)' class='add-new-task'>add Task</a></div><br />");
  }
});


// Adding First Task
$(".add-new-task").live("click", function(){
  if($(this).parent().find(".module").val() == "" ) {
    alert("please enter module name");
  }
  else {
    var added_module = $(".module").val();
    $(this).parent().append("<div class='added-module'><span class='module-name'>" + added_module +"</span><a href='Javascript:void(0)' class='edit-module'>edit</a><a href='Javascript:void(0)' class='delete-module'>delete</a><input type='hidden' value='" + added_module + "' /></div><input type='text' class='task' /><a href='Javascript:void(0)' class='add-task'>add Task</a>");
    $(this).remove();
    $(".module").remove();
  }

});


// Adding other Task
$(".add-task").live("click", function(){
  if($(this).parent().find(".task").val() == "" ) {
    alert("please enter task name");
  }
  else {
         var added_task = $(this).parent().find(".task").val();
         $(this).parent().find(".task").remove();
         $(this).parent().append("<div class='added-task'><span class='task-name'>" + added_task +"</span><a href='Javascript:void(0)' class='edit-task'>edit</a><a href='Javascript:void(0)' class='delete-task'>delete</a><input type='hidden' value='" + added_task + "' /></div><input type='text' class='task' /><a href='Javascript:void(0)' class='add-task'>add Task</a>");
         $(this).remove();
  }
});


// Showing the edit and delete on hover
$(".added-module, .added-task").live({
    mouseenter:
       function()
       {
          $(this).find("a").stop(true, true).fadeIn();
       },
    mouseleave:
       function()
       {
          $(this).find("a").stop(true, true).fadeOut();
       }
   }
);


//Edit buttons
$(".edit-task").live("click", function(){
    var text = $(this).parent().find('.task-name').text();
    console.log(text);
    $(this).parent().html("").append("<input type = 'text' class='task active' value='" + text + " '/><a href='Javascript:void(0)' class='save-task'>save</a>");

});

$(".edit-module").live("click", function(){
    var text = $(this).parent().find('.module-name').text();
    console.log(text);
    $(this).parent().html("").append("<input type = 'text' class='module active' value='" + text + " '/><a href='Javascript:void(0)' class='save-module'>save</a>");

});


//Save buttons
$(".save-module").live("click", function(){
    var added_module = $(this).parent().find('.module').val();
    $(this).parent().html("").append("<span class='module-name'>" + added_module +"</span><a href='Javascript:void(0)' class='edit-module'>edit</a><a href='Javascript:void(0)' class='delete-module'>delete</a><input type='hidden' value='" + added_module + "' />");
    $(this).remove();

});

$(".save-task").live("click", function(){
  if($(this).parent().find(".task").val() == "" ) {
    alert("please enter task name");
  }
  else {
          var added_task = $(this).parent().find(".task").val();
          $(".task.active").remove();
         $(this).parent().append("<span class='task-name'>" + added_task +"</span><a href='Javascript:void(0)' class='edit-task'>edit</a><a href='Javascript:void(0)' class='delete-task'>delete</a><input type='hidden' value='" + added_task + "' />");
         $(this).remove();
  }
});


//Delete buttons
$(".delete-module").live("click", function(){
    $(this).parent().parent().remove();
});

$(".delete-task").live("click", function(){
    $(this).parent().remove();
});






</script>

</body>
</html>

我用过

$('.module-name').text();

但没有用。请帮帮我

我需要这种格式

{
  'group': 'name': 'somename1', 
            'tasks':{'task1':'name1','task2':'name2'}
}
{'group': 'name':'somename2',
            'tasks':'{'task1':'name1','task2':'name2'}'

}

如果您运行代码，您可以更好地理解它。我无法解释这个过程，这就是我的意思。

我需要2个解决方案。

首先检索div标签中的数据，然后我需要将代码转换为JSON，如上所述。

Answer 1

现代浏览器具有帮助您处理JSON的本机功能。较旧的浏览器（IE8）需要回退（或“polyfill”）。

JSON.stringify(myobject);将JavaScript对象或数组或其他任何内容转换为有效的JSON。

JSON.parse(myjson);撤消了它。

使用jquery将数据转换为json

1 个答案: