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

回答

相關問題