Ajax的功能

-1

我有下面的代码示例的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罚款，但只有阿贾克斯功能不执行任何替代阿贾克斯吗？

来源

2017-02-24 user3286576

正如我在上面的评论说，在你ajax你有一个POST类型，但您的形式使用GET方法

这是你的表单目前的样子：<form></form>，如果你不指定方法类型默认的形式方法是GET你可以测试你的浏览器只是做一个形式没有一种方法，当你提交你会在网址page.php?field=&anotherField=?

您的评论的一个看：

当我按下按钮，然后整个页面刷新..

那么这是假设发生，因为你没有阻止默认的表单操作。

e.preventDeafult();如果您没有定义您的e，即使您可以检查您的控制台，您也会看到该错误，即e未定义，但不会妨碍您刷新。

好的我说得太多了，你的代码应该看起来如何。 1）您的形式

<form method="POST" id ="myForm"> 
     <!--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>

然后你AJAX

<script type="text/javascript"> 
       $('document').ready(function(){ 

       $('#myForm').submit(function(e){ 
        e.preventDefault(); 

        var FormData = $('#myForm').serialize(); 

        $.ajax({ 
         type:"post", 
         url:"process.php", 
         data: FormData, 
         success:function(data){ 
         $("#info").html(data); 


        } 
       }); 

       }); 

       }); 

     </script>

这就是它，然后再在你的proccess.php我不会触摸这一点，但请不要使用mysql_*它们的功能折旧。如果您仍然在学习，请尝试使用mysqli_*函数，并准备声明或PDO准备的声明。

您正在使用的api已折旧并不再受支持，如果您继续学习，那将是一种浪费。

基本上这是你的过程应该是什么样子：

<?php 

$servername = "localhost"; 
$username = "root"; 
$password = ""; 
$dbname = "dbex"; 

// Create connection 
$conn = mysqli_connect($servername, $username, $password, $dbname); 
// Check connection 
if (!$conn) { 
    die("Connection failed: " . mysqli_connect_error()); 
} 

    $name=$_POST["name"]; 
    $message=$_POST["message"]; 


    $query = $conn->prepare("INSERT INTO comment(name,message) VALUES (?,?)"); 
    $query->bind_param("ss",$name,$message); 

    if($query->execute()){ 

    echo "Your comment has been sent"; 
    }else{ 

    echo "Error in sending your comment"; 
    } 


?>

为了你自己好，请按照下面的线程，非常有帮助。

为什么你不应该使用mysql_*函数？ Answer here
为什么要使用预处理语句？Find out here

来源

2017-02-24 13:38:53

非常感谢你 – user3286576

@ user3286576很好我已经编辑了一些有用的信息我的答案 –

谢谢...... :) – user3286576

回答

相关问题