在jQuery / javascript中将Coordinate元素序列化为JSON

时间:2015-04-15 10:24:31

标签: jquery mysql json codeigniter

我需要序列化一个对象(将元素连接到JSON并传递给mysql。我使用jQuery。是否有#34;标准"这样做?

我的问题是:我不知道如何使用Codeigniter将Coordinate元素保存到Mysql(数据库)。

这是我的代码

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>
&#13;
&#13;
&#13;

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;

1 个答案:

答案 0 :(得分: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();

}