最近在做一个后台的任务管理,用到了iframe里的弹出框,效果如下
要的效果就是:选择添加对话id,点击文本框,弹出添加对话的框,可以添加多组对话
如果下一对话的id不输的话添加后会自动更新为该添加对话的id+1及下个对话的id
提交后,弹出框自动消失,文本框中自动显示添加的第一个对话的id。
我就使用了ajax进行传递。
父页为task_detail.html 子页为acceptadd_select.htm
因为没有找到在插入之前就能获取到该对话的ID的方法,所以这样做的:
自动更新下一个对话的id的方法为:
如果为空先添加,然后获取刚添加的键值:$id =
mysql_insert_id();
然后再更新刚才的数据
<div id="acceptadd" style = "width:900px;height:460px;margin:0 auto;display:none;position:absolute;background-color:#fff;Z-INDEX:4;">
<div id="areamovetop" class="top">
<div class="title"><span><b>添加对话</b></span><span id="close" onclick = "addClose()" >关闭</span></div>
</div>
<div>
<iframe name="addIframe" id="addIframe" src = "index.php?a=task&cp=acceptinsert" width="900px;" height="460px;">
</iframe>
</div>
</div>
在子页中使用ajax代码如下
子页面中的提交按钮触发一个事件
<input type='button' value='提交' id='butajax' onclick = 'subajax()'>
子页面中的jquery代码如下
<script>
function subajax()
{
id1 = $("#id1").val();
npc1 = $("#npc1").val();
user1 = $("#user1").val();
fun1 = $("#fun1").val();
id2 = $("#id2").val();
npc2 = $("#npc2").val();
user2 = $("#user2").val();
fun2 = $("#fun2").val();
id3 = $("#id3").val();
npc3 = $("#npc3").val();
user3 = $("#user3").val();
fun3 = $("#fun3").val();
//var arr = new Array();
if(npc1 && user1)
{
//npc1 = encodeURI(npc1);
//user1 = encodeURI(user1);
npc1 = escape(npc1);
user1 = escape(user1);
}
if(npc2 && user2)
{
npc2 = escape(npc2);
user2 = escape(user2);
}
if(npc3 && user3)
{
npc3 = escape(npc3);
user3 = escape(user3);
}
//alert(arr);
/*var i,jsonstr;
jsonstr="[{";
for(i=0;i<arr.length;i++)
{
jsonstr += "\"" + i + "\""+ ":" + "\"" + arr[i] + "\",";
}
jsonstr = jsonstr.substring(0,jsonstr.lastIndexOf(','));
jsonstr += "}]";*/
$.ajax({
type:'GET',
//url:'index.php?a=task&cp=acceptadd&arrstr='+jsonstr,
contentType:"application/x-www-form-urlencoded;charset=UTF-8",
url:'index.php?a=task&cp=acceptadd&id1='+id1+'&npc1='+npc1+'&user1='+user1+'&fun1='+fun1+'&id2='+id2+'&npc2='+npc2+'&user2='+user2+'&fun2='+fun2+'&id3='+id3+'&npc3='+npc3+'&user3='+user3+'&fun3='+fun3,
data:'',
success:function(msg)
{
alert(msg);
$("#acceptid", window.parent.document).val(msg);
$("#acceptadd", window.parent.document).css('display','none');
}
});
}
</script>
但在使用js的时候发现:
一:js的数组定义为 var arr = new Array(); Array中的A一定要大些
js数组转化为json格式的问题
二:ajax传递的时候不能传递中文参数,而数字和字母都是可以的
在网上查了好多资料,在传递的contentType:"application/x-www-form-urlencoded;charset=UTF-8", 加上charset=UTF-8也没起作用,最后将问题解决了
1:第一种方法就是把数据放到数组中,将数组转化成json格式的传到后台,到php
后台再用json_decode ,返回成php数组
2:在使用ajax传递时,先将汉字用escape转变一下,传递到php后台时,如何将escape转换的进行解码呢?我在网上查了很多资料都没有用,最后找到了一个函数
函数如下:
function js_unescape( $str )
{
$ret = '';
$len = strlen($str);
for ($i = 0; $i < $len; $i++)
{
if ($str[$i] == '%' && $str[$i+1] == 'u')
{
$val = hexdec(substr($str, $i+2, 4));
if ($val < 0x7f) $ret .= chr($val);
else if($val < 0x800) $ret .= chr(0xc0 |($val>>6)).chr(0x80 |($val&0x3f));
else $ret .= chr(0xe0 |($val>>12)).chr(0x80 |(($val>>6)&0x3f)).chr(0x80 |($val&0x3f));
$i += 5;
}
else if ($str[$i] == '%')
{
$ret .= urldecode(substr($str, $i, 3));
$i += 2;
}
else $ret .= $str[$i];
}
return $ret;
}
找了一个函数
OK了函数如下: