PHP und AJAX
Hallo ich bräuchte mal Hilfe beim Thema AJAX und PHP. Ich versuche einen Chat zu erstellen und habe schon viel nachgeforscht wie das mit AJAX funktioniert, bekomme es jedoch nie hin, egal mit welchem Tutorial ich es versuche
PHP Code gibt es auf anfrage,
Kommentar abgeben zu diesen Beitrag/Code ?PHP Code gibt es auf anfrage,
Mfg Basti1012
Dann hier klicken
Der hier verwendete Code
<!doctype html>
<html lang="de">
<head>
<title>Mini Ajax Chat </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
background:lightgrey;
}
#info{
color:red;
text-align:center;
}
h1{
text-align:center;
text-decoration:underline;
}
#chatconti{
display:flex;
flex-direction:column;
margin:0 auto;
justify-content: center;
min-width:500px;
max-width:1000px;
height:90vh;
overflow:auto;
padding:10px;
border:1px solid black;
border-radius:22px;
box-shadow:5px 5px 5px black;
}
#chat{
border:1px solid black;
border-radius:20px;
padding:10px;overflow:auto;
justify-content: center;
height:60%;
justify-content:center;
margin:0 0 10px 0;
}
#text{
justify-content: center;
width:70%;
}
#name{
padding:2px 10px;
width:70%;
}
#sendbox{
justify-content: center;
border:1px solid black;
padding:10px;
border-radius:20px;
}
label{
width:20%;
display:block;
text-align:center;
text-decoration:underline;
margin:7px;
}
#senden{
width:200px;
border-radius:5px;
height:20px;
font-size:16px;
margin:0 auto;
display:block;
}
#info{
font-size:12px;
}
.box{
display:flex;
flex-direction:column;
border-bottom:1px solid grey;
}
.oben {
display: flex;
border-bottom: 1px solid grey;
justify-content: space-between;
background:rgba(22,22,22,0.6);
color:white;
}
.user{
font-weight:900;
padding:0px 10px;
}
.text{
padding:2px 10px;
}
.time{
font-size:12px;
padding:0px 10px;
}
.line{
display:flex;
padding:2px;
}
</style>
<meta charset="UFT-8">
<script src="/js_webseite/jquery.js"></script>
</head>
<body>
<h1>Ajax Mini-Chat</h1>
<div id="chatconti">
<div id="chat"></div>
<div id="sendbox">
<div class="line">
<label>Name:</label>
<input type="name" id="name" placeholder="your name...">
</div>
<div class="line">
<label>Nachricht:</label>
<textarea id="text"></textarea>
</div>
<input type="button" id="senden" value="senden">
<small id="info"></small>
</div>
</div>
<script>
$(document).ready(function() {
var speed=3000;
var chatbox=document.getElementById('chat');
$('#senden').click(function(){
var text=$('#text').val();
var name=$('#name').val();
if(name==''){
name='Keine Angabe';
}
$.ajax({
type: 'POST',
url: '/apis/chat_senden.php',
data: {name:name,text:text},
success: function(data){
var text=$('#text').val('');
holen();
$('#info').html(data);
}
});
});
function holen(){
$.ajax({
type: 'GET',
url: '/apis/chat_holen.php?holer=ExjryKz',
success: function(data){
chatbox.innerHTML=data;
chatbox.scrollTop = chatbox.scrollHeight;
}
});
}
setInterval(holen,speed);
});
</script>
</body></html>