jQuery+json是否可以实现增删改查
0
悬赏园豆：20
[已解决问题]
解决于 2011-05-11 16:50
系统需完成功能如下：
页面1:上传照片，可删除照片。照片传到远程服务器，上传成功后返回文件名及缩略图名
页面2：设置冲印参数。可单选或多选照片，设置每张照片洗几寸，洗几张
页面3：预览
页面1、2、3可互相切换进入
数据操作思路设想：页面1上传照片时对服务器进行交互，页面2完全在客户端操作，在点击页面3中“进购物车”时，把数据一次性提交给服务器进行数据库处理
代码设想：是否可以定义 一个数组，数组中每个值代表一个json数组，然后再对其进行增加、删除、修改、查询操作，跨页面使用sesson传值
具体如何来实现呢，是否有更好的方法？
谢谢技术高手和热心人来看看
最佳答案
0
给你看一个我的JQ+JSON的增删改的，应该和你的要求差不多的。其中思路应该就这样了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>notemanage</title>
<link href="<?php echo url::imgpath(); ?>style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="<?php echo url::jspath(); ?>jquery-1.5.2.min.js"></script>
<script type="text/javascript" language="javascript" src="<?php echo url::jspath(); ?>public.js"></script>
<script type="text/javascript" language="javascript" src="<?php echo url::sourcepath(); ?>lhgdialog/lhgdialog.min.js"></script>
<script type="text/javascript" language="javascript">
var types = new Array()
types[0] = "推荐"
types[1] = "最新"
types[2] = "公告"
types[3] = "活动"
var dialogtitle;
var dlg;
$(document).ready(function(){
getdata(); //页面载入时调用该方法，来获取JSON数据并插入到HTML中
});
function getdata(){
$("#td_totals").html("<img src=\"<?php echo url::imgpath(); ?>loading.gif\" style=\"position: relative;top: 8px;\" />数据载入中...");
var ajaxurl1 = "<?php echo url::site('operat/notemanage'); ?>?cmd=null&r="+Math.random(); //这里是我的获取JSON数据的地址，获取到的格式如：[{"title":"我是第一个标题","type":"0","link":"xxxxxxxxx","date":"2011-04-29 14:17:14"},{"title":"我是第二个标题","type":"1","link":"xxxxxxxxxx","date":"2011-05-03 10:58:32"}]
$.getJSON(ajaxurl1, function(data){
if(data.length>0){
var str = "<table id=\"tab_repeat2\" style=\"width: 100%; margin: 0;\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">";
for(var i=0;i<data.length;i++){
str += "<tr class=\"tab_repeat_tr2\">";
str += "<td><input type=\"hidden\" name=\"hid_title\" id=\"hid_title_"+i+"\" value=\""+data[i]['title']+"\" />"+data[i]['title']+"</td>";
str += "<td style=\" width: 90px;\"><input type=\"hidden\" name=\"hid_type\" id=\"hid_type_"+i+"\" value=\""+data[i]['type']+"\" />"+types[data[i]['type']]+"</td>";
str += "<td style=\" width: 390px;\"><input type=\"hidden\" name=\"hid_link\" id=\"hid_link_"+i+"\" value=\""+data[i]['link']+"\" />"+data[i]['link']+"</td>";
str += "<td style=\" width: 160px;\">"+data[i]["date"]+"</td>";
str += "<td style=\" width: 200px;\">";
str += "<span style=\"cursor: pointer; color: #F60;\" onclick=\"creatpop("+i+", 'edit');\">编辑</span> ";
str += "<span style=\"cursor: pointer; color: #F60;\" onclick=\"creatpop("+i+", 'del');\">删除</span>";
str += "</td>";
str += "</tr>";
}
str += "</table>";
$("#td_totals").html(str); //JS拼凑成HTML串，并插入到页面当中
}else{
$("#td_totals").html("暂无数据！");
}
});
}
//准备创建弹出窗口
function creatpop(obj, cmd){
switch(cmd){
case "add":
dialogtitle = "公告管理--->添加";
showpop(obj, cmd);
break;
case "edit":
dialogtitle = "公告管理--->编辑";
showpop(obj, cmd);
break;
case "del":
if(confirm("是否确定删除该公告？")){
var params = $.param({"id":obj,"cmd":cmd});
isajax(params);
}
break;
default:
break;
}
}
//弹出窗口
function showpop(obj, cmd){
dlg = new $.dialog({
id: "notepop_"+obj,
title: dialogtitle,
width: 500,
height: 230,
resize: false,
cover: true,
btnBar: false,
html: creathtml(obj, cmd), //这里是生成弹出窗口中HTML的内容
rang: true,
dgOnLoad: function(){
if(cmd=="edit"){ //这里，如果是编辑，就用刚JS生成的隐藏的文本域的值给弹出页面中文本框赋值
$("#tbox_title_"+obj,dlg.topDoc).val($("#hid_title_"+obj).val());
$("#sel_type_"+obj,dlg.topDoc).val($("#hid_type_"+obj).val());
$("#tbox_link_"+obj,dlg.topDoc).val($("#hid_link_"+obj).val());
}
$("#dosubmit",dlg.topDoc).click(function(){ //这个是弹出窗口中的确定按钮的触发事件
var stitle = $("#tbox_title_"+obj,dlg.topDoc).val();
var stype = $("#sel_type_"+obj,dlg.topDoc).val();
var slink = $("#tbox_link_"+obj,dlg.topDoc).val();
if(!val_empty(stitle) || !val_empty(slink)){
alert("有未填项！");
return false;
}
var params = $.param({"id":obj,"stitle":stitle,"stype":stype,"slink":slink,"cmd":cmd}); //这里的id就是JSON中索引ID，从0开始，cmd就是告诉后台要执行的操作，其它值就是要生成JSON的值
isajax(params);
});
}
});
dlg.ShowDialog();
}
function creathtml(obj, cmd){
var str = "<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" style=\"margin: 10px auto 0 auto; width: 98%;\">";
str += "<tr style=\"height: 42px; line-height: 42px;\">";
str += "<td style=\"width: 100px; text-align: right;\">公告标题：</td>";
str += "<td style=\"width: 350px; text-align: left;\"><input type=\"text\" name=\"tbox_title\" id=\"tbox_title_"+obj+"\" class=\"tbox\" style=\"width: 300px;\" /></td>";
str += "</tr>";
str += "<tr style=\"height: 42px; line-height: 42px;\">";
str += "<td style=\"width: 100px; text-align: right;\">公告类型：</td>";
str += "<td style=\"width: 350px; text-align: left;\"><select name=\"sel_type\" id=\"sel_type_"+obj+"\">";
str += "<option value=\"0\">"+types[0]+"</option><option value=\"1\">"+types[1]+"</option><option value=\"2\">"+types[2]+"</option><option value=\"3\">"+types[3]+"</option>";
str += "</select> ";
str += "</td>";
str += "</tr>";
str += "<tr style=\"height: 42px; line-height: 42px;\">";
str += "<td style=\"width: 100px; text-align: right;\">公告链接：</td>";
str += "<td style=\"width: 350px; text-align: left;\"><input type=\"text\" name=\"tbox_link\" id=\"tbox_link_"+obj+"\" class=\"tbox\" style=\"width: 300px;\" /></td>";
str += "</tr>";
str += "</tr>";
str += "<tr style=\"height: 42px; line-height: 42px;\">";
str += "<td style=\"width: 100px; text-align: center;\" colspan=\"2\"><input type=\"submit\" name=\"dosubmit\" id=\"dosubmit\" value=\"确 定\" class=\"but\" /></td>";
str += "</tr>";
str += "</table>";
return str;
}
function isajax(params){
var ajaxurl1 = "<?php echo url::site('operat/notemanage'); ?>?"+params+"&r="+Math.random(); //用AJAX再次提交给后台进行操作
$.get(ajaxurl1, function(data){
if(data == "1"){
alert("操作成功！");
getdata();
}else{
alert("操作失败！");
}
dlg.cancel();
});
}
</script>
</head>
<body>
<div class="div_repeat">
<table class="tab_repeat" id="tab_repeat1" border="0" cellspacing="0" cellpadding="0" style="margin: 10px auto 0 auto; width: 98%;">
<tr class="tab_repeat_tr1">
<td style="text-align: left; font-size: 14px;" colspan="5">
<span style="margin: 0 10px 0 0;">游戏内公告管理</span>
<span><input type="submit" name="dosubmit" id="dosubmit" value="添加公告" class="but" onclick="creatpop(null,'add');" /></span>
</td>
</tr>
<tr class="tab_repeat_tr1" style="background: none; text-indent: 0px;">
<td style="border-right: solid 1px #65dfe7;">公告标题</td>
<td style="border-right: solid 1px #65dfe7; width: 90px;">公告类型</td>
<td style="border-right: solid 1px #65dfe7; width: 390px;">公告链接</td>
<td style="border-right: solid 1px #65dfe7; width: 160px;">发布时间</td>
<td style="width: 200px;">操作</td>
</tr>
<tr>
<td colspan="5" id="td_totals" style="height: 38px; line-height: 38px;"></td>
</tr>
</table>
</div>
</body>
</html>
这里是我的后台处理的代码，我用的是PHP的，其它语言应该差不多。
//公告管理
public function notemanage() {
if (self::$ajax) { //这里判断是否是AJAX提交，具体网上有我就不写了
$noteurl = "media/static/file/note.json"; //这是要获取JSON数据的地址
$url = self::$platlist [self::$platinfo['id']] ['static'] . $noteurl;
$temp = file_get_contents($url); //开始获取
$rs = json_decode($temp, true); //将获取到的JSON数据转为数组
$cmd = $this->getparam('cmd');
$id = $this->getparam('id');
switch ($cmd) {
case "add": //如果是添加操作，就在数组总数后再加一条就可以了。因为数组索引从0开始的，所以最后再加一条的话，该索引位必定是该数组总数量这位置上
$rs[count($rs)] = array('title' => $this->getparam('stitle'), 'type' => $this->getparam('stype'), 'link' => $this->getparam('slink'), 'date' => self::$mydate['nowdtime']);
$str = json_encode($rs); //再将转成JSON格式
$data = array('str' => $str); //将转换后的作为一个数组的值
$result = $this->geturl('rwritinnote', $data, self::$platinfo['id']); //开始提交数据，这里是我的一个提交的方法。
echo $result['status'];
break;
case "edit": //如果是改操作，则根据AJAX提交过来的更改后的索引位置，来更新数组中对应值即可。
$rs[$id] = array('title' => $this->getparam('stitle'), 'type' => $this->getparam('stype'), 'link' => $this->getparam('slink'), 'date' => self::$mydate['nowdtime']);
$str = json_encode($rs);
$data = array('str' => $str);
$result = $this->geturl('rwritinnote', $data, self::$platinfo['id']);
echo $result['status'];
break;
case "del": //删除直接用PHP的数组替换方法，不知道其它语言中是哪个
array_splice($rs, $id, 1);
$str = json_encode($rs);
$data = array('str' => $str);
$result = $this->geturl('rwritinnote', $data, self::$platinfo['id']);
echo $result['status'];
break;
default :
echo $temp;
break;
}
exit();
} else {
$view = new View(self::$skinpath . 'notemanage');
$view->render(true);
}
}
收获园豆：20
我查找了大量资料，搞定了，有时间也贴代码上来，楼上热情，给分
其他回答(1)
0
真的好久没见过这么长的代码了
