在php中同时使用jquery操作形成 - Form in php with jquery actions simultaneously

我有一个表单，当点击发送按钮时，应该执行jquery操作，并将表单中输入的数据发送到php中的数据库。我编写了以下html、php和javascript文件，但当我单击发送时，我只看到执行了jquery操作，数据没有发送到数据库，我没有看到任何告诉我php文件正在运行的内容，所以这里是文件，我认为问题主要来自php文件本身，但这里是三个文件：

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

<!DOCTYPE html>
<html>
<head>
	<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{
	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();
};

?>

如果这个问题不能快速解决，我可以建立数据库，将文件上传到一个免费的托管帐户上，并将帐户的详细信息留在这里。

实际上，您应该以某种方式跟踪脚本发送的http请求（在您的情况下是POST请求），并为此使用一些调试器（Mozilla浏览器的firebug应该这样做）。如果您没有看到页面发送的任何POST请求，请尝试通过$("form[name='send-question']").submit();手动发送。现在，您应该会收到服务器的http响应，并能够分析其内容。