【代码】AJAX POST和Get传递数据方法

jackxiang 2009-7-13 15:03 大 | 中 | 小
注意POST:

$this->para['uid'] = $_POST['uid'];
$this->para['content'] =$_POST['content'];

GET接收：

$this->para['uid'] = $_GET['uid'];
$this->para['content'] =$_GET['content'];

中文问题：

    var url="a.jsp?name=小李"；
    url=encodeURI(url);
    url=encodeURI(url); //两次，很关键[具体为什么，我也不清楚]
    /********************************************/
    也有人写成var url="a.jsp?name=escape("小李")"；
    功能和encodeURI方法类似。
    /********************************************/
    xmlHTTP.setrequestheader("cache-control","no-cache");
    xmlHTTP.setrequestheader("Content-Type","application/x-www-form-urlencoded");
    xmlHTTP.setrequestheader("contentType","text/html;charset=uft-8")//指定发送数据的编码格式
    xmlHTTP.open ("post",url,true);

PHP得做：urldecode()的操作。

用httpfox抓包，用httpwatcher调试js错误。
以下是Ajax POST提交方式提交：


<!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>
    {literal}
    <script language="javascript">
      <!--
      function AjaxLib()
      {
        //创建AJAX实例
        try {
          xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
  try {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (err) {
             xmlhttp = null;
                }
    }
  if(!xmlhttp && typeof XMLHttpRequest != "undefined")
  xmlhttp = new XMLHttpRequest();
  if (!xmlhttp){
       return null;
         }
           return xmlhttp;
         }
         function AjaxCheck(obj)
         {
           //判断检测用户名
           var xmlObj  = AjaxLib();
           var objId  = obj.id;
           var userName = document.getElementById(objId);
           //alert(document.getElementById("userName").value);
           //alert(document.getElementById("uid").value);
           var content = document.getElementById("userName").value;
           var uid = document.getElementById("uid").value;
           var ParamString = "content=" + content + "&uid=" + uid;
           var url   = "dopost3.php";
           xmlObj.onreadystatechange = function ()
           {
             if (xmlObj.readyState == 4)
             {  
               var objHelpId = document.getElementById("userNameHelp");
               var objwordsnow= document.getElementById("wordsnow");
               //alert(xmlObj.responseText);
               if (xmlObj.responseText == "ok")
               {    
                   objHelpId.innerHTML = "留言成功！";
                   objwordsnow.innerHTML = content;
                    }
                     else
                     {
                         objHelpId.innerHTML = "留言没成功!";
                      objwordsnow.innerHTML = content;
                          }
                          }
}
xmlObj.open("post", url, true);
xmlObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlObj.send(ParamString);
}
-->
</script>
{/literal}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{$username}的留言板</title>
</head>

<body>
<table width="500" border="1" align="center" cellpadding="1" cellspacing="1">
<tr>
    <td width="313"><div align="center"><a href="index.php">回首页</a></div></td>
    <td width="174"><div align="center">请在下面给{$username}写留言</div></td>
</tr>
  <tr>
    <td colspan="2"><div align="center">{$username}的留言板</div></td>
</tr>
<tr><td colspan="2">留言内容:<div align="center" name="wordsnow" id="wordsnow"></div></td></tr>
  {foreach from=$walllist item=wall}
  <tr>
    <td colspan="2">留言内容：{$wall.content}</td>
  </tr>
  {/foreach}
</table>

<div align="center" name="userNameHelp" id="userNameHelp">马上留言</div>
<form action="" name="f" id="f">
  <table width="500" border="1" align="center" cellpadding="1" cellspacing="1">
    <tr>
          <td width="313"><div align="center">
            <p>给{$username}写留言</p>
                  <p>
                <textarea name="userName" rows="12" id="userName"></textarea>
                      </p>
                      </div></td>
                        <td width="174"><div align="center">                                    <input type="hidden" value={$uid} name="uid" id="uid"><input type="button" name="button" onclick="AjaxCheck(this)" id="button" value="Ajax提交" /></div></td>
                    </tr>
                  </table>

                </form>
</body>
</html>


以下是Ajax GET提交方式提交：


<!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>
    {literal}
    <script language="javascript">
      <!--
      function AjaxLib()
      {
        //创建AJAX实例
        try {
          xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
  try {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
       } catch (err) {
             xmlhttp = null;
                }
    }
  if(!xmlhttp && typeof XMLHttpRequest != "undefined")
  xmlhttp = new XMLHttpRequest();
  if (!xmlhttp){
       return null;
         }
           return xmlhttp;
         }
         function AjaxCheck(obj)
         {
           //判断检测用户名
           var xmlObj  = AjaxLib();
           var objId  = obj.id;
           var userName = document.getElementById(objId);
           //alert(document.getElementById("userName").value);
           //alert(document.getElementById("uid").value);
           var content = document.getElementById("userName").value;
           var uid = document.getElementById("uid").value;
           var url   = "dopost2.php?content=" + content + "&uid=" + uid;
           xmlObj.onreadystatechange = function ()
           {
             if (xmlObj.readyState == 4)
             {  
               var objHelpId = document.getElementById("userNameHelp");
               var objwordsnow= document.getElementById("wordsnow");
               //alert(xmlObj.responseText);
               if (xmlObj.responseText == "ok")
               {    
                   objHelpId.innerHTML = "留言成功！";
                   objwordsnow.innerHTML = content;
                    }
                     else
                     {
                         objHelpId.innerHTML = "留言没成功!";
                      objwordsnow.innerHTML = content;
                          }
                          }
}
xmlObj.open("GET", url, true);
xmlObj.send(null);
}
-->
</script>
{/literal}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{$username}的留言板</title>
</head>

<body>
<table width="500" border="1" align="center" cellpadding="1" cellspacing="1">
<tr>
    <td width="313"><div align="center"><a href="index.php">回首页</a></div></td>
    <td width="174"><div align="center">请在下面给{$username}写留言</div></td>
</tr>
  <tr>
    <td colspan="2"><div align="center">{$username}的留言板</div></td>
</tr>
<tr><td colspan="2">留言内容:<div align="center" name="wordsnow" id="wordsnow"></div></td></tr>
  {foreach from=$walllist item=wall}
  <tr>
    <td colspan="2">留言内容：{$wall.content}</td>
  </tr>
  {/foreach}
</table>

<div align="center" name="userNameHelp" id="userNameHelp">马上留言</div>
<form action="" name="f" id="f">
  <table width="500" border="1" align="center" cellpadding="1" cellspacing="1">
    <tr>
          <td width="313"><div align="center">
            <p>给{$username}写留言</p>
                  <p>
                <textarea name="userName" rows="12" id="userName"></textarea>
                      </p>
                      </div></td>
                        <td width="174"><div align="center">                                    <input type="hidden" value={$uid} name="uid" id="uid"><input type="button" name="button" onclick="AjaxCheck(this)" id="button" value="Ajax提交" /></div></td>
                    </tr>
                  </table>

                </form>
</body>
</html>

作者：jackxiang@向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除
地址：http://jackxiang.com/post/1833/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明！


最后编辑： jackxiang 编辑于2009-7-13 15:28
评论列表
发表评论

昵称

网址

电邮

打开HTML 打开UBB 打开表情 隐藏 记住我 [登入] [注册]