简单的实现web聊天界面，一对一 

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<script src="js/jquery.js" charset="utf-8"></script>

<script type="text/javascript">
function send(){
    var str=$("#content1").val();//document.getElementById("content1");  
    //alert(str);
    

    var contens=document.getElementById("content");  

    //contens.innerHTML=str+"<br>";
    //document.getElementsByName("content1").value="";
    //    document.getElementsById("content1").value="1";

    $.ajax({  
               type:"POST",  
               url:"LoadPerdictServlet",  
               data:{
                   option:str,
                
               },  
          //     dataType : "json", //返回数据形式为json/或者是别的
               statusCode: {404: function() 
                   {  
                  //alert('page not found');          
                  
                  
                  /* 此处做个展示 */
                  
                       var html='';
                       html+='<font color="red">me say：</font>';
                        html+='<li>';
                        html+='<div>'+str+'</div>';
                        html+='</li>';
                        
                       html+='<font color="red">Ta say：</font>';
                        html+='<li>';
                        html+='<div>ok</div>';
                        html+='</li>';
                        
                        contens.innerHTML+=html; 
                  
                 },     
                
               success:function(data,textStatus){
                /*    var html='';
                       html+='<font color="red">me say：</font>';
                        html+='<li>';
                        html+='<div>'+str+'</div>';
                        html+='</li>';
                        
                       html+='<font color="red">Ta say：</font>';
                        html+='<li>';
                        html+='<div>ok</div>';
                        html+='</li>';
                        
                        contens.innerHTML+=html; */
                        
                       } 
               }  
    });   
    
    }
</script>
</head>




<body>

<table width="778" height="276" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
  <td>
<fieldset style="width:326px"> 
     <ul id="content" style="text-align:left"> 
</ul> 
</fieldset>
    </td>
  </tr>
</table>
<table width="778" height="106" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
      <td width="549" align="left">
    
    <input id="content1" type="text" size="70" value="">
      <input name="Submit2" type="button" class="btn_grey" value="发送" onClick="send()"></td>
  </tr>
</table>

</body>
</html>

 

posted @ 2018-04-26 11:20  红凉梦  阅读(927)  评论(0)    收藏  举报