在jQuery / javascript中将坐标元素序列化为JSON答案

【问题标题】：Serializing Coordinate element to JSON in jQuery/javascript在jQuery / javascript中将坐标元素序列化为JSON
【发布时间】：2015-06-21 06:24:37
【问题描述】：

我需要序列化一个对象（将元素坐标到 JSON 并传递给 mysql。我正在使用 jQuery。是否有“标准”方法来做到这一点？

我的问题是：我不知道如何使用 Codeigniter 将坐标元素保存到 Mysql(database)。

这是我的代码

Js:> CSS:> HTML:

$(function() 
  {
    $( "#element" ).draggable({ snap: ".ui-widget-header",grid: [ 1, 1 ]});
  });
    $(document).ready(function() {
        $("#element").draggable({ 
                containment: '#snaptarget', 
                scroll: false
         }).mousemove(function(){
                var coord = $(this).position();
                var width = $(this).width();
               var height = $(this).height();
                $("p.position").text( "(" + coord.left + "," + coord.top + ")" );
                $("p.size").text( "(" + width + "," + height + ")" );
         }).mouseup(function(){

                var coord = $(this).position();
                var width = $(this).width();
                var height = $(this).height();
                $.post('test/layout', {x: coord.left, y: coord.top, w: width, h: height});
                
                });
                         
        });

#element {background:#666;border:1px #000 solid;cursor:move;height:110px;width:110px;padding:10px 10px 10px 10px;}
#snaptarget { height:600px; width:1000px;}
.draggable { width: 90px; height: 80px; float: left; margin: 0 0 0 0; font-size: .9em; }
.wrapper
{ 
background-image:linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
height:100%;
background-size:45px 45px;
border: 1px solid black;
background-color: #434343;
margin: 20px 0px 0px 20px;
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Layout</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="../themes/default/css/test4.css" type="text/css" charset="utf-8"/>
    <script src="../themes/default/js/layout.js"></script>
  </head>
<body>
    <div id="snaptarget" class="wrapper">
        <div id="element" class="draggable ui-widget-content">
          <p class="position"></p>
          <p class="size"></p>
        </div>
    </div> 
    <div id="respond"></div>
</body>
</html>

MYSQL：

    DROP TABLE IF EXISTS test.layout;
    CREATE TABLE  test.layout (
             id int(10) unsigned NOT NULL AUTO_INCREMENT,
             y_pos int(10) unsigned DEFAULT NULL,
             x_pos int(10) unsigned DEFAULT NULL,
             width int(10) unsigned DEFAULT NULL,
             height int(10) unsigned DEFAULT NULL,
             PRIMARY KEY (`id`)
    ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

【问题讨论】：

你试过在codeigniter中创建模型文件吗？
我不知道如何进一步创建..错误..请帮助 zz。
谁能给点建议？请 .. MVC 中的问题 - 控制器和模型端。
我需要你们关于“Codeiginiter”、MVC、模型和控制器的所有编码方面的帮助。

标签： jquery mysql json codeigniter

【解决方案1】：

我可以举例说明 Model-Controller 如何在 CodeIgniter 中工作：

布告栏表格模型文件

文件名：crm_noticeboard_model

public function insert_note()
{
    // table field name noticeboard_msg, noticeboard_date_modified 
    $note->noticeboard_msg            = $this->input->post('note'); 
    $note->noticeboard_date_modified  = date('Y-m-d H:i'); 

    // how to insert record for table tb_crm_noticeboard
    $insert = $this->db->insert('tb_crm_noticeboard', $note);

    // check if insert successful
    return $insert; 
}

控制器文件

public function add()
{
    // we call the model method to insert
    // assuming you validate the input to other controller function
    $this->crm_noticeboard_model->insert_note();

}

【讨论】：