Aider moi - AJAX envoyer une requette avec php
Bonjour,
je me permet de faire ce sujet car je rencontre pas mal de problème et j'aimerais vraiment utiliser cette fonction, je suis en train de crée un petit tchat sur un de met site internet, et j'aimerais avoir une fonction qui permet de ne pas reload un page quand ton envois le message. Suite a plusieur recherche sur internette je n'est pas trouver ce que je chercher alors je me suis dit que vous pouvais peut-être m'aidée, je tien a présiser que je suis pas un expert dutout en codage et je commance juste a apprendre.
ci-dessous je vous met le code de ma page plus un screen de ce que sa donne sur la page.
code de ma page:
<?php
#| CODER PAR DYLAN BERNARD SOCIALCMS 1.0 #|
include("../reglage.php");
if(!session_is_registered(username))
{
Redirect("./connexion");
}
// message
$dedi = Securise($_GET['achat']);
if($dedi == "dedi"){
$message = Securise($_POST['message']);
mysql_query("INSERT INTO tahctsite(pseudo,look,message,couleur,date) VALUES ('".$user['username']."','".$user['images']."','".$message."','".$user['couleur']."',".time().")");
$erreur1 = "Bien joué, ton message et en ligne !";}
else { $erreur = "Oops, une erreur est survenu, réessaye dans quelques instants!";
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A fully featured admin theme which can be used to build CRM, CMS, etc.">
<meta name="author" content="Coderthemes">
<link rel="shortcut icon" href="./assets/images/favicon_1.ico">
<title><?php $getNews = mysql_query("SELECT * FROM configuration ");
$i = 1; while ($n = mysql_fetch_assoc($getNews)){
echo '' . $n['sitename'] . '';}?> - Manager</title>
<!--Morris Chart CSS -->
<link rel="stylesheet" href="./assets/plugins/morris/morris.css">
<link href="./assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="./assets/css/core.css" rel="stylesheet" type="text/css" />
<link href="./assets/css/components.css" rel="stylesheet" type="text/css" />
<link href="./assets/css/icons.css" rel="stylesheet" type="text/css" />
<link href="./assets/css/pages.css" rel="stylesheet" type="text/css" />
<link href="./assets/css/responsive.css" rel="stylesheet" type="text/css" />
<!-- HTML5 Shiv and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<script src="./assets/js/modernizr.min.js"></script>
</head>
<body class="fixed-left">
<!-- Begin page -->
<div id="wrapper">
<!-- Top Bar Start -->
<div class="topbar">
<!-- LOGO -->
<div class="topbar-left">
<div class="text-center">
<a href="index.html" class="logo"><i class="icon-magnet icon-c-logo"></i><span><?php $getNews = mysql_query("SELECT * FROM configuration ");
$i = 1; while ($n = mysql_fetch_assoc($getNews)){
echo '' . $n['sitename'] . '';}?></span></a>
<!-- Image Logo here -->
<!--<a href="index.html" class="logo">-->
<!--<i class="icon-c-logo"> <img src="assets/images/logo_sm.png" height="42"/> </i>-->
<!--<span><img src="assets/images/logo_light.png" height="20"/></span>-->
<!--</a>-->
</div>
</div>
<?PHP include("./menu/menu.php"); ?>
<!-- ============================================================== -->
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="content-page">
<!-- Start content -->
<div class="content">
<div class="container">
<!-- Page-Title -->
<div class="row">
<div class="col-sm-12">
<h4 class="page-title">Dashboard</h4>
<p class="text-muted page-title-alt"><?PHP echo $user['username']; ?>, bienvenue sur le manager.</p>
</div>
</div>
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="widget-bg-color-icon card-box fadeInDown animated">
<div class="bg-icon bg-icon-info pull-left">
<i class="md md-done text-info"></i>
</div>
<div class="text-right">
<h3 class="text-dark"><b class="counter">0</b></h3>
<p class="text-muted">Terminées</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="widget-bg-color-icon card-box">
<div class="bg-icon bg-icon-pink pull-left">
<i class="md md-clear text-pink"></i>
</div>
<div class="text-right">
<h3 class="text-dark"><b class="counter">0</b></h3>
<p class="text-muted">Remboursements</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="widget-bg-color-icon card-box">
<div class="bg-icon bg-icon-purple pull-left">
<i class="md md-access-time text-purple"></i>
</div>
<div class="text-right">
<h3 class="text-dark"><b class="counter">0</b></h3>
<p class="text-muted">en cours</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="widget-bg-color-icon card-box">
<div class="bg-icon bg-icon-success pull-left">
<i class="md md-sync text-success"></i>
</div>
<div class="text-right">
<h3 class="text-dark"><b class="counter">0</b></h3>
<p class="text-muted">Services disponibles</p>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default panel-border">
<div class="panel-heading">
<h3 class="panel-title">Actuellement <b>0</b> personnes sur le chat.</h3>
</div>
<div class="panel-body">
<p>
<div class="row"><form id="dedi_you" method="post" action="?achat=dedi">
<div class="col-sm-9 chat-inputbar">
<input type="text" name="message" class="form-control chat-input" placeholder="Votre message...">
</div>
<div class="col-sm-3 chat-send">
<button type="submit" name="?achat=dedi" class="ladda-button btn btn-primary" data-style="expand-right">Envoyer</button>
</div>
</div></form>
<div class="col-lg-11">
<div class="card-box">
<div class="chat-conversation">
<ul class="conversation-list nicescroll">
<?php
//on se connecte a notre base de donne
//on selectionne les donnes dans la table dedicasse, selectionner les derniere entré ORDER BY id DESC veut dire desordre et limit c'est la limit 0 à 10 entré.
$retour = mysql_query("SELECT * FROM tahctsite ORDER BY id DESC limit 40");
?><?php
//on affiche notre boucle
while($donnees = mysql_fetch_array($retour)){
echo'
<li class="clearfix">
<div class="chat-avatar">
<img src="'.Securise($donnees['look']).'">
<i>'. $date." ".date('H:i', $donnees['date']).'</i>
</div>
<div class="conversation-text">
<div class="ctext-wrap">
<i>'.Securise($donnees['pseudo']).'</i>
<p>
'.Securise($donnees['message']).'
</p>
</div>
</div>
</li>';}?>
</ul>
</div></div></div>
</p>
</div>
</div>
</div>
</div>
<!-- end row -->
</div>
<!-- end row -->
</div> <!-- container -->
</div> <!-- content -->
<footer class="footer text-right">
© <?php $getNews = mysql_query("SELECT * FROM configuration ");
$i = 1; while ($n = mysql_fetch_assoc($getNews)){
echo '' . $n['sitename'] . '';}?> - Tous droits réservés.
</footer>
</div>
<!-- ============================================================== -->
<!-- End Right content here -->
<!-- ============================================================== -->
<!-- Right Sidebar -->
<div class="side-bar right-bar nicescroll">
<h4 class="text-center">Chat</h4>
<div class="contact-list nicescroll">
<ul class="list-group contacts-list">
<li class="list-group-item">
<a href="#">
<div class="avatar">
<img src="assets/images/users/avatar-1.jpg" alt="">
</div>
<span class="name">Chadengle</span>
<i class="fa fa-circle online"></i>
</a>
<span class="clearfix"></span>
</li>
<li class="list-group-item">
<a href="#">
<div class="avatar">
<img src="assets/images/users/avatar-2.jpg" alt="">
</div>
<span class="name">Tomaslau</span>
<i class="fa fa-circle online"></i>
</a>
<span class="clearfix"></span>
</li>
<li class="list-group-item">
<a href="#">
<div class="avatar">
<img src="assets/images/users/avatar-3.jpg" alt="">
</div>
<span class="name">Stillnotdavid</span>
<i class="fa fa-circle online"></i>
</a>
<span class="clearfix"></span>
</li>
<li class="list-group-item">
<a href="#">
<div class="avatar">
<img src="assets/images/users/avatar-4.jpg" alt="">
</div>
<span class="name">Kurafire</span>
<i class="fa fa-circle online"></i>
</a>
<span class="clearfix"></span>
</li>
<li class="list-group-item">
<a href="#">
<div class="avatar">
<img src="assets/images/users/avatar-5.jpg" alt="">
</div>
<span class="name">Shahedk</span>
<i class="fa fa-circle away"></i>
</a>
<span class="clearfix"></span>
</li>
<li class="list-group-item">
<a href="#">
<div class="avatar">
<img src="assets/images/users/avatar-6.jpg" alt="">
</div>
<span class="name">Adhamdannaway</span>
<i class="fa fa-circle away"></i>
</a>
<span class="clearfix"></span>
</li>
<li class="list-group-item">
<a href="#">
<div class="avatar">
<img src="assets/images/users/avatar-7.jpg" alt="">
</div>
<span class="name">Ok</span>
<i class="fa fa-circle away"></i>
</a>
<span class="clearfix"></span>
</li>
<li class="list-group-item">
<a href="#">
<div class="avatar">
<img src="assets/images/users/avatar-8.jpg" alt="">
</div>
<span class="name">Arashasghari</span>
<i class="fa fa-circle offline"></i>
</a>
<span class="clearfix"></span>
</li>
<li class="list-group-item">
<a href="#">
<div class="avatar">
<img src="assets/images/users/avatar-9.jpg" alt="">
</div>
<span class="name">Joshaustin</span>
<i class="fa fa-circle offline"></i>
</a>
<span class="clearfix"></span>
</li>
<li class="list-group-item">
<a href="#">
<div class="avatar">
<img src="assets/images/users/avatar-10.jpg" alt="">
</div>
<span class="name">Sortino</span>
<i class="fa fa-circle offline"></i>
</a>
<span class="clearfix"></span>
</li>
</ul>
</div>
</div>
<!-- /Right-bar -->
</div>
<!-- END wrapper -->
<script>
var resizefunc = [];
</script>
<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/detect.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/jquery.blockUI.js"></script>
<script src="assets/js/waves.js"></script>
<script src="assets/js/wow.min.js"></script>
<script src="assets/js/jquery.nicescroll.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<script src="assets/plugins/peity/jquery.peity.min.js"></script>
<!-- jQuery -->
<script src="assets/plugins/waypoints/lib/jquery.waypoints.js"></script>
<script src="assets/plugins/counterup/jquery.counterup.min.js"></script>
<script src="assets/plugins/morris/morris.min.js"></script>
<script src="assets/plugins/raphael/raphael-min.js"></script>
<script src="assets/plugins/jquery-knob/jquery.knob.js"></script>
<script src="assets/pages/jquery.dashboard.js"></script>
<script src="assets/js/jquery.core.js"></script>
<script src="assets/js/jquery.app.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.counter').counterUp({
delay: 100,
time: 1200
});
$(".knob").knob();
});
</script>
</body>
</html>screen de la page -> http://prntscr.com/f0ymo2
suite a sa j'ai tester divers tutos mais aucun resulta donner.
Ce que je veux:
C'est obtenier un system permetant de envoyer un message grace au bouton envoyer dans le screen juste ci-dessus sans que la page s'actualise.
Voila si vous avais la moindre question poster la dans les commantaires, je vous remerci par avance.
Dylan.
1 réponse
Salut, va regarder ce tuto peut être tu auras une solution https://www.grafikart.fr/tutoriels/php/tchat-jquery-ajax-php-82