形式在與jquery動作PHP同時

我有按鈕被點擊時發送，jquery的操作應該被執行，並在表格中輸入的數據應當在PHP被髮送到數據庫的形式。我寫了下面HTML，PHP和JavaScript文件，但是當我點擊發送，我只看到了jQuery行動執行，數據不會被髮送到數據庫中，我沒有看到任何東西，告訴我，PHP文件運行所以這裏有文件，我認爲這個問題將主要來自PHP文件本身，但這裏有三個文件：形式在與jquery動作PHP同時

$(document).ready(function() { 
 
\t $('#2').hide(); 
 
\t $('#3').hide(); 
 
\t $('#4').hide(); 
 
\t $('#5').hide(); 
 
\t $('#6').hide(); 
 
\t $('#7').hide(); 
 
\t $('#8').hide(); 
 
\t $('#9').hide(); 
 
\t  $('.emailpassword').click(function(){ 
 
    \t $('#1').remove(); 
 
    \t $('#2').show(); 
 
    \t $('#3').hide(); 
 
    \t $('.progress-bar').css({'width':'25%','background-color':'#f27011'}); 
 
    }); 
 
    $('#tags').click(function(){ 
 
    \t $('#1').hide(); 
 
    \t $('#2').hide(); 
 
    \t $('#3').show(); 
 
    }); 
 
    $('.add').click(function() { 
 
    \t if ($('#1').length==0) { 
 
\t \t  $('#3').hide(); 
 
\t \t  $('#2').hide(); 
 
\t \t  $('#4').show(); 
 
\t \t  setTimeout(function(){ 
 
\t \t  \t $('#4').hide(); 
 
\t \t  \t $('#5').show(); 
 
\t \t  \t $('.progress-bar').css({'width':'50%','background-color':'#f2b01e'}); 
 
\t \t  },5000); 
 
\t \t  setTimeout(function(){ 
 
\t \t  \t $('#5').hide(); 
 
\t \t  \t $('#6').show(); 
 
\t \t  \t $('.progress-bar').css({'width':'75%','background-color':'#f2d31b'}); 
 
\t \t  },9000); 
 
\t \t  setTimeout(function(){ 
 
\t \t  \t \t $('#6').hide(); 
 
\t \t  \t \t $('#7').show(); 
 
\t \t  \t },13000); 
 
\t \t  \t setTimeout(function(){ 
 
\t  \t \t $('#7').hide(); 
 
\t  \t \t $('#8').show(); 
 
\t \t  },17000); 
 
\t \t  setTimeout(function(){ 
 
\t \t  \t $('#8').hide(); 
 
\t \t  \t $('#9').show(); 
 
\t \t  \t $('.progress-bar').css({'width':'100%','background-color':'#86e01e'}); 
 
\t \t  },21000); 
 
\t \t }; 
 

 
\t }); 
 
});

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Form</title> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script type="text/javascript" src="javascript44.js"></script> 
 
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'> 
 
<link async href="http://fonts.googleapis.com/css?family=Passero%20One" data-generated="http://enjoycss.com" rel="stylesheet" type="text/css"/> 
 
<style type="text/css"> 
 
@font-face { 
 
    font-family: 'Coda'; 
 
    font-style: normal; 
 
    font-weight: 400; 
 
    src: local('Coda'), local('Coda-Regular'), url(http://fonts.gstatic.com/s/coda/v11/oLj2Snaoi65TK4xobg2LWRTbgVql8nDJpwnrE27mub0.woff2) format('woff2'); 
 
    unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; 
 
} 
 

 
@font-face { 
 
    font-family: 'Coda'; 
 
    font-style: normal; 
 
    font-weight: 400; 
 
    src: local('Coda'), local('Coda-Regular'), url(http://fonts.gstatic.com/s/coda/v11/lAc2voHjo6apblwiEW49vfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2'); 
 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000; 
 
} 
 
.enjoy-css { 
 
    display: inline-block; 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    padding: 6px 20px; 
 
    border: none; 
 
    -webkit-border-radius: 32px/54px; 
 
    border-radius: 32px/54px; 
 
    font: normal 18px/normal "Coda", Helvetica, sans-serif; 
 
    color: rgba(0,142,198,1); 
 
    -o-text-overflow: ellipsis; 
 
    text-overflow: ellipsis; 
 
    background: rgba(252,252,252,1); 
 
    -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2) inset; 
 
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.2) inset; 
 
    text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ; 
 
    -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); 
 
} 
 
.enjoy-css:hover { 
 
    background: rgba(232,249,255,1); 
 
    -webkit-box-shadow: 0 2px 2px 0 rgba(90,90,90,0.2) inset; 
 
    box-shadow: 0 2px 2px 0 rgba(90,90,90,0.2) inset; 
 
} 
 
.enjoy-css:focus { 
 
    background: rgba(255,253,232,1); 
 
} 
 
.button { 
 
    display: inline-block; 
 
    -webkit-box-sizing: content-box; 
 
    -moz-box-sizing: content-box; 
 
    box-sizing: content-box; 
 
    cursor: pointer; 
 
    padding: 10px 20px; 
 
    border: 1px solid #018dc4; 
 
    -webkit-border-radius: 3px; 
 
    border-radius: 3px; 
 
    font: normal medium/normal Arial, Helvetica, sans-serif; 
 
    color: rgba(255,255,255,0.9); 
 
    -o-text-overflow: clip; 
 
    text-overflow: clip; 
 
    background: #0199d9; 
 
    -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ; 
 
    box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ; 
 
    text-shadow: -1px -1px 0 rgba(15,73,168,0.66) ; 
 
    -webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1); 
 
} 
 
.button:hover { 
 
    border: 1px solid #007cad; 
 
    background: rgba(0,142,198,1); 
 
    -webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3) ; 
 
    box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3) ; 
 
    -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); 
 
} 
 
.button:active { 
 
    border: 1px solid #018dc4; 
 
    background: #00a6e8; 
 
    -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2) inset; 
 
    box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2) inset; 
 
    text-shadow: none; 
 
    -webkit-transition: all 50ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    -moz-transition: all 50ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    -o-transition: all 50ms cubic-bezier(0.42, 0, 0.58, 1); 
 
    transition: all 50ms cubic-bezier(0.42, 0, 0.58, 1); 
 
} 
 
p{ 
 
\t text-align: center; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<form action="form-process.php" method="POST" name="send-question"> 
 
<input name="email" class="enjoy-css emailpassword afters" style="outline: none;" placeholder="random input 1" /> 
 
<input name="name" type="password" class="enjoy-css emailpassword afters" style="outline: none; margin-top:15px;" placeholder="random input 2" /> 
 
<input name="number" class="enjoy-css afters" id="tags" style="outline: none;margin-top:15px;" placeholder="random input 3" /> 
 
<input name="submit" type="button" class="button add" style="margin-left:10px;outline:none;"value="button" /> 
 

 
</form> 
 

 
<div class="messagewidth" style="background-color: gray; width: 43%; margin: 0 auto;border-radius: 25px; height: 22px;"> 
 
     <p id="1" class="font" style="font-family: 'Coda';">random message 1...</p> 
 
     <p id="2" class="font" style="font-family: 'Coda';">random message 2...</p> 
 
     <p id="3" class="font" style="font-family: 'Coda';">random message 3...</p> 
 
     <p id="4" class="font" style="font-family: 'Coda';">auto message 1...</p> 
 
     <p id="5" class="font" style="font-family: 'Coda';">auto message 2...</p> 
 
     <p id="6" class="font" style="font-family: 'Coda';">auto message 3...</p> 
 
     <p id="7" class="font" style="font-family: 'Coda';">auto message 4...</p> 
 
     <p id="8" class="font" style="font-family: 'Coda';">auto message 5...</p> 
 
     <p id="9" class="font" style="font-family: 'Coda';">auto message 6...</p> 
 
</div> 
 
</body> 
 
</html>

和PHP文件：（不能投入該代碼段）

<?php 
if (! empty($_POST)) { 
$mysqli = new mysqli('localhost', 'user-username', 'user-password', 'database-name'); 
if ($mysqli->connect_error) { 
    die('Connect Error: ' . $mysqli->connect_errno . ': ' . $mysqli->connect_error); 
} 
$sql = "INSERT INTO tablename (email, name, number) VALUES ('{$mysqli->real_escape_string($_POST['email'])}', '{$mysqli->real_escape_string($_POST['name'])}', '{$mysqli->real_escape_string($_POST['number'])}')"; 
$insert = $mysqli->query($sql); 

$mysqli->close(); 

}; 


?>

如果問題無法從快速瀏覽中解決，我可以設置數據庫並將文件上載到免費託管帳戶，並在此處留下帳戶的詳細信息。

來源

2016-04-03 Jake A

你什麼也沒有顯示提交表單數據。如果您在提交表單時不想刷新頁面，則需要使用AJAX發送數據。有很多關於如何使用ajax提交表單的教程。您的PHP沒有設置爲返回響應 – charlietfl

我將需要使用AJAX爲了不重定向到PHP文件，但我不能讓PHP文件工作，並插入到數據庫繼續使用AJAX .. –

那麼你試過的ajax代碼在哪裏？ – charlietfl

Actualy你應該以某種方式跟蹤您的腳本（在你的情況下，POST請求）發送的HTTP的請求，使用一些調試器用於此目的（螢火蟲的Mozilla瀏覽器中應該做的）。如果您沒有看到您的頁面發送任何POST請求，請嘗試通過$("form[name='send-question']").submit();手動發送。現在您應該從您的服務器接收http響應，並能夠分析它的內容。

來源

2016-04-03 15:48:38

它沒有發送任何請求。 –

形式在與jquery動作PHP同時

回答

相關問題