我有下面的代碼示例的index.php & process.php:Ajax的功能
的index.php
-----------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
<!--Short cut -->
<link rel="shortcut icon" href="../Final_projet/dashboard/images/chat.png">
</head>
<body class="hidden-sn blue-skin">
<!-- Start your project here-->
<!--
<div style="height: 100vh">
<div class="flex-center">
<h1 class="animated fadeIn">Material Design for Bootstrap</h1>
</div>
</div>
<!--Double navigation-->
<header>
<!-- Sidebar navigation -->
<ul id="slide-out" class="side-nav custom-scrollbar">
<!-- Logo -->
<li>
<div class="logo-wrapper waves-light"> <a href="#"><img src="http://mdbootstrap.com/wp-content/uploads/2015/12/mdb-white2.png " class="img-fluid flex-center"></a> </div>
</li>
<!--/. Logo -->
<!--Social-->
<li>
<ul class="social">
<li><a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a></li>
<li><a class="icons-sm pin-ic"><i class="fa fa-pinterest"> </i></a></li>
<li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a></li>
<li><a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a></li>
</ul>
</li>
<!--/Social-->
<!--Search Form-->
<li>
<form class="search-form" role="search">
<div class="form-group waves-light">
<input type="text" class="form-control" placeholder="Search">
</div>
</form>
</li>
<!--/.Search Form-->
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion">
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-chevron-right"></i> Submit blog<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Submit listing</a> </li>
<li><a href="#" class="waves-effect">Registration form</a> </li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-hand-pointer-o"></i> Instruction<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">For bloggers</a> </li>
<li><a href="#" class="waves-effect">For authors</a> </li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-eye"></i> About<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">Introduction</a> </li>
<li><a href="#" class="waves-effect">Monthly meetings</a> </li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r"><i class="fa fa-envelope-o"></i> Contact me<i class="fa fa-angle-down rotate-icon"></i></a>
<div class="collapsible-body">
<ul>
<li><a href="#" class="waves-effect">FAQ</a> </li>
<li><a href="#" class="waves-effect">Write a message</a> </li>
</ul>
</div>
</li>
</ul>
</li>
<!--/. Side navigation links -->
</ul>
<!--/. Sidebar navigation -->
<!--Navbar-->
<nav class="navbar navbar-fixed-top scrolling-navbar double-nav">
<!-- SideNav slide-out button -->
<div class="pull-left"> <a href="#" data-activates="slide-out" class="button-collapse"><i class="fa fa-bars"></i></a> </div>
<!-- Breadcrumb-->
<div class="breadcrumb-dn">
<p>Breadcrumb or page title</p>
</div>
<ul class="nav navbar-nav pull-right">
<li class="nav-item "> <a class="nav-link"><i class="fa fa-envelope"></i> <span class="hidden-sm-down">Contact</span></a> </li>
<li class="nav-item "> <a class="nav-link"><i class="fa fa-comments-o"></i> <span class="hidden-sm-down">Support</span></a> </li>
<li class="nav-item "> <a class="nav-link"><i class="fa fa-user"></i> <span class="hidden-sm-down">Account</span></a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user"></i> Profile</a>
<div class="dropdown-menu dropdown-primary dd-right" aria-labelledby="dropdownMenu1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div>
</li>
</ul>
</nav>
<!--/.Navbar-->
</header>
<!--/Double navigation-->
<script type="text/javascript">
// SideNav init
$(".button-collapse").sideNav();
// SideNav init
$(".button-collapse").sideNav();
// Custom scrollbar init
var el = document.querySelector('.custom-scrollbar');
Ps.initialize(el);
</script>
<!--Main layout-->
<main>
<!--/Main layout-->
<div class="container-fluid">
<!--Form without header-->
<div class="card">
<div class="card-block">
<!--Header-->
<div class="text-center">
<h3><i class="fa fa-pencil"></i> Subscribe:</h3>
<hr class="mt-2 mb-2">
</div>
<!--Body-->
<p>We'll write rarely, but only the best content.</p>
<br>
<form>
<!--Body-->
<div class="md-form">
<input type="text" id="name" class="form-control">
</div>
<div class="md-form">
<input type="text" id="message" class="form-control">
</div>
<div class="text-center">
<button class="btn btn-deep-orange" id="button">Send</button>
</div>
</form>
</div>
</div>
<!--/Form without header-->
<div id="info"></div>
</div>
</main>
<!-- /Start your project here-->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/tether.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#button").submit(function() {
return false;
};
$("#button").click(function(){
e.preventDefault();
var name=$("#name").val();
var message=$("#message").val();
$.ajax({
type:"post",
url:"process.php",
data:"name="+name+"&message="+message,
success:function(data){
$("#info").html(data);
}
});
e.preventDefault();
});
});
</script>
</body>
</html>
process.php
<?php
mysql_connect("localhost","root","");
mysql_select_db("dbex");
$name=$_POST["name"];
$message=$_POST["message"];
$query=mysql_query("INSERT INTO comment(name,message) values('$name','$message') ");
if($query){
echo "Your comment has been sent";
}
else{
echo "Error in sending your comment";
}
?>
jQuery中的Ajax函數不能與MDB 4.2.0.document ready部分一起工作,甚至按鈕單擊事件也是可行的ng罰款,但只有阿賈克斯功能不執行任何替代阿賈克斯嗎?
非常感謝你 – user3286576
@ user3286576很好我已經編輯了一些有用的信息我的答案 –
謝謝...... :) – user3286576