Ajax post 提交数据

<SCRIPT LANGUAGE=”javascript”>
<!–      
function saveUserInfo()
{
    //获取接受返回信息层
    var msg = document.getElementById(”msg”);

    //获取表单对象和用户信息值
    var f = document.user_info;    
    var userName = f.user_name.value;
    var userAge = f.user_age.value;
    var userSex = f.user_sex.value;

    //接收表单的URL地址
    var url = “commit.ASPX”;    
    //需要POST的值,把每个变量都通过&来联接
    var postStr = “name=”+ userName +”&age=”+ userAge +”&sex=”+ userSex;

    //实例化Ajax
    var ajax = null;
    if(window.XMLHttpRequest){
        ajax = new XMLHttpRequest();
       }
    else if(window.ActiveXObject){
        ajax = new ActiveXObject(”Microsoft.XMLHTTP”);
       }
    else{
        return;
       }

    //通过Post方式打开连接
    ajax.open(”POST”, url, true);
    //定义传输的文件HTTP头信息
    ajax.setRequestHeader(”Content-Type”,”application/x-www-form-urlencoded”);
    //发送POST数据
    ajax.send(postStr);

    //返回数据的处理函数
    ajax.onreadystatechange = function(){
        if (ajax.readyState == 4 && ajax.status == 200){
               msg.innerHTML = ajax.responseText;
            }
      }
}

–>
</SCRIPT>

<form name=”user_info”>
     姓名:<input type=”text” name=”user_name” /><br/>
     年龄:<input type=”text” name=”user_age” /><br/>
     性别:<input type=”text” name=”user_sex” /><br/>
<input type=”button” value=”提交表单” onClick=”saveUserInfo()”>
</form>

//构建一个接受返回信息的层:
<div id=”msg”></div>

———————————————————————–

下面是我在一个 WEB客服聊天工具 的一个页面:

<%@ Page Language="C#" ValidateRequest="false" AutoEventWireup="true" CodeFile="Client.aspx.cs" Inherits="Client" %>

<!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>
<title>ICHAT client</title>
   
<script type="text/javascript">

var xmlHttp = createXmlHttpRequestObject();

function createXmlHttpRequestObject()
{
var xmlHttp;
try
{
   xmlHttp = new XMLHttpRequest();
}
catch(e)
{
   var XmlHttpVersions = new Array("MSXML2.XMLHTTP.6.0",
           "MSXML2.XMLHTTP.5.0",
           "MSXML2.XMLHTTP.4.0",
           "MSXML2.XMLHTTP.3.0",
           "MSXML2.XMLHTTP",
           "Microsoft.XMLHTTP");
   for (var i = 0; i < XmlHttpVersions.length && !xmlHttp; i++){
    try
    {
     xmlHttp = new ActiveXObject(XmlHttpVersions[i]);
    }
    catch (e) {}
   }
}
if (!xmlHttp)
   alert("建立XMLHttpRequest object错误。");
else
   return xmlHttp;
}

function process( _url)
{
if (xmlHttp)
{
   try
   {
   //~/MSG99.aspx?FromID=wgscd
    xmlHttp.open("GET",_url ,false);
    xmlHttp.onreadystatechange = handleRequestStateChange;
    xmlHttp.send(null);
   }
   catch (e)
   {
    alert("不能连接服务器:
" + e.toString());
   }
}
}

function handleRequestStateChange()
{
myDiv = document.getElementById("myDivElement");
if (xmlHttp.readyState == 1)
{
   //myDiv.innerHTML += "Requset status:1 (loading) <br />"
}
else if(xmlHttp.readyState == 2)
{
   //myDiv.innerHTML += "Requset status:2 (loading) <br />"
}
else if(xmlHttp.readyState == 3)
{
   //myDiv.innerHTML += "Requset status:3 (loading) <br />"
}
else if(xmlHttp.readyState == 4)
{
   if (xmlHttp.status == 200)
   {
    try
    {
     response = xmlHttp.responseText;
     //myDiv.innerHTML += "Requset status:4 (complete).服务器返回:<br />"
     //myDiv.innerHTML="";
    
          if(response!=""){
     myDiv.innerHTML += response;
                      }
    
    }
    catch (e)
    {
     alert("读取response错误:" + e.toString());
    }
   }
   else
   {
    alert("接收数据时出现问题
" + xmlHttp.statusText);
   }
  
  
}
}

function getMsg() {

var d= new Date();

var uid=document.getElementById("<% =lbuser.ClientID %>").getAttribute("InnerText") ;

//alert( uid );

process("msg.aspx?uid="+ uid +"&d="+d);

    
setTimeout( "getMsg()",1000);

}

function SendMsg()

{

   
   var d= new Date();
    //获取接受返回信息层
var msgreturn = document.getElementById("msgreturn");
    //获取表单对象和用户信息值
var f = document.form1;
var fuid=document.getElementById("<% =lbuser.ClientID %>").getAttribute("InnerText") ;
var tuid=document.getElementById("<% =txtToUser.ClientID %>").getAttribute("value") ;
var msg = document.getElementById("TextMsg").value ;
// 添加到聊天记录列表
myDiv = document.getElementById("myDivElement");
myDiv.innerHTML+="<font color=’green’>" +fuid + "   "+ d.toString()+ "</font><br>" + msg + "<br/>";
  
    //接收表单的URL地址
    var url = "SendCommit.aspx";    
    //需要POST的值,把每个变量都通过&来联接
    var postStr = "fuid="+ fuid +"&tuid="+ tuid +"&msg="+msg;

    //实例化Ajax
    var ajax = null;
    if(window.XMLHttpRequest){
        ajax = new XMLHttpRequest();
       }
    else if(window.ActiveXObject){
        ajax = new ActiveXObject("Microsoft.XMLHTTP");
       }
    else{
        return;
       }

    //通过Post方式打开连接
    ajax.open("POST", url, true);
    //定义传输的文件HTTP头信息
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //发送POST数据
    ajax.send(postStr);
   
   

    //返回数据的处理函数
    ajax.onreadystatechange = function(){
        if (ajax.readyState == 4 && ajax.status == 200){
       
       
             // msgreturn.innerHTML = ajax.responseText;
              
              
            }
      }

    reFreshState();

}

function reFreshState(){

var msgKeyInBox = document.getElementById("TextMsg") ;
       msgKeyInBox.value="";

}

</script>
    
   
</head>
<body onload ="getMsg()">
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" BackColor="#E0E0E0" ForeColor="Blue" Text="服务端"
            Width="433px"></asp:Label><br />
        <asp:Label ID="lbuser" runat="server" Text="Client"></asp:Label>&nbsp;to&nbsp;
        <asp:TextBox
            ID="txtToUser" runat="server" Width="127px">Server</asp:TextBox></div>
      

         
<DIV id="myDivElement" runat="server" align=left
style=’
color: #000;
background-color:White;
border: solid 2px black;
width: 420px;
height: 200px;
overflow-x:auto;
overflow-y: scroll;
scrollbar-face-color: #889B9F;
scrollbar-shadow-color: #3D5054;
scrollbar-highlight-color: #C3D6DA;
scrollbar-3dlight-color: #3D5054;
scrollbar-darkshadow-color: #85989C;
scrollbar-track-color: #95A6AA;
scrollbar-arrow-color: #FFD6DA;
padding-left:12px;

‘>

    </DIV>      
        <br />
        <br />
        <br />
        <asp:Button ID="btnShowAll" runat="server" OnClick="btnShowAll_Click" Text="show all msg"
            Width="424px" /><br />
        <textarea id="TextMsg" style="width: 414px; height: 88px"></textarea><br />
        <input type="button" value="提交表单" onClick="SendMsg()" id="Button1">
        <asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="clear all msg" /><br />
        <asp:Literal ID="Literal1" runat="server"></asp:Literal><br />
        <div id="msgreturn">
            </div>    </form>
</body>
</html>

我自己写的代码,,还能用.

<script>
     function check()
     {
        if(document.getElementById(‘comment’).value==null||
        document.getElementById(‘comment’).value=="")
        {
         alert(‘请输入回复内容!’);
         return false;
        }else{
         doUp();
        }
     }
     var xmlHttp
     function doUp()
     {
        var comment=document.getElementById(‘comment’).value;
        var nid=<s:property value="#attr.mess.id"/>;
        var act="reply";
        var userId=<s:property value="#attr.loginInfor.id"/>;
     xmlHttp=GetXmlHttpObject();
     if (xmlHttp==null)
      {
      alert ("您的浏览器不支持AJAX!");
      return;
      }
     var url="noticeServlet";
     var postStr = "act="+ act +"&nid="+ nid +"&userId="+ userId+"&comment="+comment;
        //通过Post方式打开连接
      xmlHttp.open("POST", url, true);
      //定义传输的文件HTTP头信息
      xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      //发送POST数据
      xmlHttp.send(postStr);
     xmlHttp.onreadystatechange=stateChanged;
     }
     function stateChanged()
     {
     if (xmlHttp.readyState==4)
     {
     // document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
      alert(xmlHttp.responseText);
      // window.location.href="noticeServlet?nid="+<s:property value="#attr.mess.id"/>;
      window.close();
      // window.location.replace("noticeServlet?nid="+<s:property value="#attr.mess.id"/>);
     
     }
     }
     function GetXmlHttpObject()
     {
     var xmlHttp=null;
     try
      {
      // Firefox, Opera 8.0+, Safari
      xmlHttp=new XMLHttpRequest();
      }
     catch (e)
      {
      // Internet Explorer
      try
        {
        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
      catch (e)
        {
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
      }
     return xmlHttp;
     }
     </script>
      <form name="reply" method="post" action="noticeServlet">
      <tr>
       <td class="detail_title" valign="top">
        &nbsp;
       </td>
       <td colspan="2" valign="top">
        <input name="comment" type="text" id="comment" size="60">
        <input type="hidden" name="userId"
         value="<s:property value="#attr.loginInfor.id"/>" />
        <input type="hidden" name="nid"
         value="<s:property value="#attr.mess.id"/>" />
        <input type="hidden" name="act" value="reply" />
       </td>
       <td colspan="3" valign="top">
        <input name="memo" type="text" id="memo" size="40">
       </td>
       <td valign="top">
        <input type="button" name="Submit" value="提交回复"
         onclick="check();">
       </td>
      </tr>
      </form>

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>