最近在做一個后臺的任務管理，用到了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了函數如下：