mysql简单前后端交互_一个简单的calendar前后台交互

1，页面部分

<

se-mark="1">div class="modal

modal-fade"

id="event-modal">

<

div

class="modal-dialog">

<div

class="modal-content">

<div

class="modal-header">

<h4

class="modal-title"> 事件h4>

div>

<div

class="modal-body">

<table>

<tr>

<td>标题td><td>

<input name="event-name" type="text" class="form-control" width="200px">td>

tr>

<tr>

<td>地点td><td>

<input name="event-location" type="text" class="form-control" width="200px">td>

tr>

<tr>

<td>日期td>

<td>

<input

name="event-start-date" type="text" class="form-control" value="2012-04-05">

​<span

class="input-group-addon">至span>

<input

name="event-end-date" type="text" class="form-control" value="2012-04-19">

​td>

tr>

table>

div>

<div

class="modal-footer">

<button

type="button" class="btn btn-default" data-dismiss="modal">取消button>

<button

type="button" class="btn btn-primary" id="save-event"> 保存button>

div>

div>

div>

div>

div>​

2，JS部分

function saveEvent()

{

var title

= $('#event-modal

input[name="event-name"]').val();

var

position =

$('#event-modal

input[name="event-location"]').val();

var startd

= $('#event-modal

input[name="event-start-date"]').datepicker('getDate');

var endd

= $('#event-modal

input[name="event-end-date"]').datepicker('getDate');

console.log(startd);

var event

= { id:

$('#event-modal

input[name="event-index"]').val(),

name: title,

location: position,

startDate: startd,

endDate:

endd}

var t

=

startd.getTime();

startd = new

Date(t);

startd =

formatDate(startd,

"yyyy-MMM-dd");

t =

endd.getTime();

endd = new

Date(t);

endd =

formatDate(endd,

"yyyy-MMM-dd");

var

dataSource =

$('#calendar').data('calendar').getDataSource();

if(event.id)

{

for(var

i in dataSource)

{

if(dataSource[i].id

== event.id) {

dataSource[i].name

=

event.name;

dataSource[i].location

=

event.location;

dataSource[i].startDate

=

event.startDate;

dataSource[i].endDate

=

event.endDate;

} } }

else{

var newId

= 0; for(var

i in dataSource)

{

if(dataSource[i].id

> newId) {

newId =

dataSource[i].id;

} }

newId++;

event.id

= newId;

dataSource.push(event);

}

$('#calendar').data('calendar').setDataSource(dataSource);

$('#event-modal').modal('hide');

var

postmsg =

{'function':'save_calendar','mobile':login_id,'startd':startd,

'endd':endd,'title':title,'position':position,'time':get_time()};

console.log(postmsg);

$.post('../function.php',

postmsg, function(data){

console.log(data);

}); }

$(function()

{

sdk = new

WSDK(); get_localsetting();

//get_user_info(u_mobile);create_alert_sound();

openim_login();

user_login("calendar");

get_mycalendar();

$('#save-event').click(function()

{ saveEvent(); });

});

​

3，php及mysql部分​

​if($function

=="save_calendar"){

$userid =

$_POST['mobile'];

$title =

iconv("utf-8","gbk",$_POST['title']);

$position

=

iconv("utf-8","gbk",$_POST['position']);

$startd =

$_POST['startd']; $endd

=

$_POST['endd'];

if($db=link_mysql_tao21())

{

mysql_query("SET NAMES

gbk"); //这个防止中文乱码

​$q="INSERT

INTO calendar (`mobile` ,`name` ,`location` ,`startd` ,`endd` )

VALUES ('$userid',

'$title',

'$position',

'$startd',

'$endd')";

$res =

mysql_query($q,$db);

mysql_close($db);

}}