聊天系统

显示所有的信息

chat.html

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
	<title></title>
	<style>
	#button1{
	background:skyblue;
	border-radius:20px;
	width:100px;
	}
	</style>
	<script>
	function showmessage(){

var xhr=new XMLHttpRequest();
	xhr.open("GET","index.php?t="+new Date().getTime(),true);//
	xhr.send();
	xhr.onreadystatechange = function(){
			if(xhr.readyState==4){
			document.getElementById('div1').innerHTML = "";
			
			
			str = JSON.parse(xhr.responseText);
			console.log(str.length);
			
			var i=0;
			for(i;i<str.length;i++)
			{
			document.getElementById('div1').innerHTML += str[i].receiver+"说:"+str[i].con+"<br>";
			}
			
			
			}
			
			
			}
			
			
	}
showmessage();	
window.onload = function(){
		setInterval("showmessage()",2000);
}


	</script>
	
	
</head>
<body>
<button id="button1">点击</button>
<input id="input1">
<div id="div1"></div>

</body>
<script type="text/javascript">

var inp1=document.getElementById("input1");

document.getElementById("button1").onclick=function(){
		alert(inp1.value);
		
		var username = username;
		var password = password;
		
		
		
		var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4) {
                
            }
        }
       xhr.open("GET",send.php,true);
		
        xhr.send();
		
}



</script>
</html>

index.php


<?php
header("Content-type:application/json;charset=utf-8");
$link= mysqli_connect("localhost","root","");

if(!$link){
    exit('数据库连接失败');
}

mysqli_set_charset($link,'utf8');

mysqli_select_db($link,'test');

$sql = "SELECT * FROM `content` ";

$obj = mysqli_query($link,$sql);


while ($rows = mysqli_fetch_assoc($obj)){
   $info[] = $rows;
}


echo json_encode($info);

插入所有的信息

chat.html

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
	<title></title>
	<style>
	#button1{
	background:skyblue;
	border-radius:20px;
	width:100px;
	}
	</style>
	
	
	
</head>
<body>
<button id="button1">点击</button>
<input id="input1">
<input id="input2">
<div id="div1"></div>

</body>
<script type="text/javascript">





document.getElementById("button1").onclick=function(){
		
		var div1 = document.getElementById("div1");
		
		var inp1=document.getElementById("input1");
		var inp2=document.getElementById("input2");
		var username = inp1.value;
		var con = inp2.value;
		
		var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4) {
                div1.innerHTML = xhr.responseText;
            }
        }
       xhr.open("GET","send.php?username="+username+"&con="+con,true);
		
        xhr.send();
		
}



</script>
</html>

send.php

<?php
$username = $_GET["username"]; 
$con = $_GET["con"];

header("Content-type:application/json;charset=utf-8");
$link= mysqli_connect("localhost","root","");

if(!$link){
    exit('数据库连接失败');
}

mysqli_set_charset($link,'utf8');
mysqli_select_db($link,'test');


$sql ="INSERT INTO  `test`.`content` (
`receiver` ,
`con`
)
VALUES (
'$username',  '$con'
);
";

$obj = mysqli_query($link,$sql);




echo $username;
echo $con;
发布了171 篇原创文章 · 获赞 29 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/weixin_43560272/article/details/102884343