我试图从php脚本中获取回复，所以我不必重新加载页面并显示一些动画。
我有两个部分都在工作，但是当我尝试将它们放在一起时，没有任何作用。
现在我通过Ajax发送输入数据，但我无法恢复结果。
请提前帮助我。
HTML
<head>
<title>
Consultapp :: Consultar
</title>
<?php include_once('head-attrib.php'); ?>
</head>
<body>
<div class="content">
<section>
<img src="source/img/logo.png" class="logo logo-small logo-search">
<p class="copy">Para consultar, ingresa un numero de cedula.</p>
<div class="card card-searchcard animated" >
<form id="searchBar" method="get">
<input type="search" class="field" name="searchBox" id="searchBox" placeholder="Ingresa una identificacion aqui" min="11111111" max="9999999999">
<button class="btn btn-main btn-bar right"><span class="text">CONSULTAR</span><i class="material-icons md-36 md-light">search</i></button>
</form>
</div>
<br>
<?php print($message) ?>
<div style="margin-bottom:85px"> <!-- Prevents cropped results -->
<?php print($info) ?>
<div class="scroller-box">
<!-- Search Trasition-->
<script type="text/javascript">
$(function() {
var box = $('.card-searchcard');
var logo = $('.logo-search');
var copy = $('.copy');
var button = $('#searchBar button');
button.one('click', function(){
box.toggleClass('active');
logo.toggleClass('active');
copy.toggleClass('active');
var dataString = document.getElementById("searchBox").value; // Post data to send
console.log("Data Collected Susccessfully");
return false;
$.ajax({
type: "post",
url: "scripts/search.php",
data: dataString,
success: function() {
alert("Hi gorgeous!");
}
});
});
});
</script>
</div>
</div>
</div>
<?php include_once('navbar.php'); ?>
</section>
</div>
</body>
PHP
<?php
include_once("scripts/global.php");
// Collecting input variables
$entry = '';
$message = '';
$search = $_POST['searchBox'];
if(isset($search)) {
// Validation
if (empty($search)) {
$message = "Necesito un numero para consultar"; //Empty field message
}
else{ //MySQL DB search query
$searchquery = mysql_query("SELECT * FROM submissions WHERE id='$search'") or die("Could not check ID, I'm search");
$count = mysql_num_rows($searchquery);
if ($count == 0) {
$no_results = array( //Funny Error Messages goes here
'<span>Ups</span><br>Esta persona aun no ha sido calificada<br>Puedes añadir una calificacion si lo deseas',
'<span>Hay Caramba</span><br>nadie sabe acerca de esta persona<br> Tu sabes? Genial, añade una calificacion.',
);
$message = $no_results[array_rand($no_results)];
}
else{
while ($row = mysql_fetch_array($searchquery)) {
$name = $row['name'];
$id = $row['id'];
$amount = $row['amount'];
$submitter = $row['submitter'];
$rating = $row['rating'];
//Thumbs up or thumbs down icon
if ($rating == 'good') {
$ratingIcon = '<i class="material-icons">thumb_up</i>';
}
else{
$ratingIcon= '<i class="material-icons">thumb_down</i>';
}
$entry .= ( //Display individual entries (Can repeat)
"<div class='entry animated slideInEntry'>
<div>
<span>$submitter</span>
<span>$amount</span>
</div>
<div>$ratingIcon</div>
</div>
");
}
$info .=( //Display Person data (Not reapeat)
"<div class='card card-infocard animated slideInEntry'>
<label for='id'>CEDULA</label>
<span name='id'>$id</span>
<span name='name'>$name</span>
<button class='btn btn-fab btn-main'></span><i class='material-icons md-36 md-light'>add_circle_outline</i></button>
</div>
");
}
}
}
?>
CSS，如果你想要它
/* Reset CSS & Global Attributes */
*{
box-sizing: border-box;
font-family: 'Raleway', sans-serif;
font-weight: 600;
letter-spacing: 1px;
margin: 0;
padding: 0;
border: 0;
}
/*Hiiden Scrollbar*/
::-webkit-scrollbar{
display: none;
}
a{
text-decoration: none;
color: inherit;
}
button, input{
margin: 0;
border: none;
}
/* Rules for using icons as black on a light background. */
.material-icons.md-dark{
color: rgba(0, 0, 0, 0.54);
}
.material-icons.md-dark.md-inactive{
color: rgba(0, 0, 0, 0.26);
}
/* Rules for using icons as white on a dark background. */
.material-icons.md-light{
color: rgba(255, 255, 255, 1);
}
.material-icons.md-light.md-inactive{
color: rgba(255, 255, 255, 0.3);
}
.left{
float: left;
}
.right{
float: right;
}
/*Small Devices*/
@media all and (max-width: 699px){
/* Rules for sizing the icon. */
.material-icons.md-18{
font-size: 18px;
}
.material-icons.md-24{
font-size: 24px;
}
.material-icons.md-36{
font-size: 36px;
}
.material-icons.md-48{
font-size: 48px;
}
/* Logo Attributes - Logo Attributes - Logo Attributes - Logo Attributes - Logo Attributes - Logo Attributes - Logo Attributes - Logo Attributes */
.logo-big{
width: 102px;
margin: 70px auto;
}
.logo-small{
width: 66px;
}
.logo-search{
margin: 55px 0 30px ;
}
/* Button Attributes - Button Attributes - Button Attributes - Button Attributes - Button Attributes - Button Attributes - Button Attributes */
.btn{
color: #FFFFFF;
font-weight: 600;
font-size: 15px;
}
.btn-main{
background-color: #80CCFF;
}
.btn-secondary{
background-color: #4C4C4C;
}
.btn-card{
border-radius: 0 0 3px 3px;
width: 100%;
height: 60px;
line-height: 60px;
}
.btn-fab{
width: 60px;
height: 60px;
border-radius: 100%;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.12);
line-height: 10px;
}
.card-infocard > .btn-fab{
position: absolute;
bottom: 0;
right: 0;
z-index: 9999;
margin: 0 20px -20px 0;
}
.btn-bar{
height: 55.5px;
width: 56px;
border-radius: 0 3px 3px 0;
}
.btn-bar > .text{
display: none;
}
/* Card Attributes - Card Attributes - Card Attributes - Card Attributes - Card Attributes - Card Attributes - Card Attributes - Card Attributes */
.card{
background-color: #FFFFFF;
color: #4C4C4C;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.12);
text-align: left;
border-radius: 3px;
}
.card-small{
max-width: 350px;
margin: 0 auto;
}
.card-searchcard{
width: 315px;
height: 56px;
margin: 35px auto 20px;
padding: 0 0 0 20px !important;
}
.card-infocard{
max-width: 315px;
padding: 23px 5%;
margin: 0 auto 35px;
}
.card-infocard > label{
display: inline;
}
.card-infocard > span:nth-child(3){
font-size: 16px;
font-weight: bolder;
display: block;
margin: 12px 0 0;
}
.entry{
background-color: rgba(0,0,0,0.3);
max-width: 300px;
padding: 10px 0;
margin: 20px auto;
border-radius: 5px;
}
.entry > div{
display: inline-block;
}
.entry > div:nth-child(1){
margin: 0 55px 0 20px;
}
.entry > div:nth-child(2){
margin: 0 20px 0 55px;
}
.entry > div > span{
display: block;
margin: 5px 0;
text-align: left;
}
.entry > div > span:nth-child(1){
font-weight: bolder;
font-size: 16px;
}
.entry > div > i{
vertical-align: baseline;
font-size: 30px;
}
/* Input Attributes - Input Attributes - Input Attributes - Input Attributes - Input Attributes - Input Attributes - Input Attributes - Input Attributes */
label{
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #393950;
display: block;
}
/* No blue outline on inputs */
textarea, input{
outline: none;
}
input[type=mail], input[type=password]{
padding: 15px 0 10px 0;
margin-bottom: 30px;
font-size: 14px;
color: #4C4C4C;
font-family: 'Raleway';
width: 100%;
font-weight: 600;
border: solid rgba(0,0,0,0.18);
border-width: 0 0 2px 0;
display: block;
}
input[type=search]{
height: 56px;
width: 70%;
font-size: 14px;
}
/* Placeholder Styling */
::-webkit-input-placeholder{
color: #808080;
font-family: 'Raleway';
}
:-moz-placeholder{
/* Firefox 18- */
color: #808080;
font-family: 'Raleway';
}
::-moz-placeholder{
/* Firefox 19+ */
color: #808080;
font-family: 'Raleway';
}
:-ms-input-placeholder{
color: #808080;
font-family: 'Raleway';
}
/* No arrows on number input*/
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
/*No color autofill*/
input:-webkit-autofill{
background-color: rgba(255,255,255,1); !important;
background-color: #FFFFFF !important;
}
/* Other Attributes - Other Attributes - Other Attributes - Other Attributes - Other Attributes - Other Attributes - Other Attributes - Other Attributes */
body{
font-size: 14px;
background-color: #0C77F8;
text-align: center;
font-size: 14px;
color: #FFFFFF;
}
.remora{
margin: 25px 0;
font-size: 12px;
color: #FFFFFF;
font-weight: 400;
}
.navbar{
width: 100%;
font-size: 12px;
color: #FFFFFF;
background-color: #0C77F8;
position: fixed;
bottom: 0;
left: 0;
z-index: 9999;
}
.navbar-icon{
margin: 15px 50px;
display: inline-table;
}
.navbar-icon > i{
margin-bottom: 5px;
}
.wrapper{
padding: 45px 12% 0;
}
span.link > a{
border-bottom: solid 2px #80CCFF;
font-weight: 600;
}
.scroller-box{
}
/* End of small devices styling - End of small devices styling - End of small devices styling - End of small devices styling - End of small devices styling*/
}
动画代码，如果你想要的话再次。
.animated{
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
/* Searchbar Animation -Searchbar Animation -Searchbar Animation -Searchbar Animation -Searchbar Animation */
.logo-search.active{
-webkit-animation-name: logoSearchActive;
animation-name: logoSearchActive;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
}
.copy.active{
opacity: 0;
transition: 0.5s ease-in;
}
.card-searchcard.active{
-webkit-animation-name: searchcardActive;
animation-name: searchcardActive;
z-index: 9999;
-webkit-animation-duration: 1.2s;
animation-duration: 1.2s;
transition: 0.8s ease-in;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
@-webkit-keyframes searchcardActive{
0%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
20%{
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
60%{
width: 315px;
}
100%{
-webkit-transform: translateY(-221px);
transform: translateY(-221px);
border-radius: 0px;
width: 100vw;
}
}
@keyframes searchcardActive{
0%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
20%{
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
60%{
width: 315px;
}
100%{
-webkit-transform: translateY(-221px);
transform: translateY(-221px);
border-radius: 0px;
width: 100vw;
}
}
@-webkit-keyframes logoSearchActive{
0%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
50%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
100%{
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
visibility: hidden;
}
}
@keyframes logoSearchActive{
0%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
50%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
100%{
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
visibility: hidden;
}
}
答案 0 :(得分：3)
我认为您只需要修复PHP脚本并修复Ajax调用的响应。
首先，你需要PHP并且回复＆＃39;声明打印一些输出。输出将传递给ajax调用的响应，而JS有一些材料可以处理。
一个例子：
<?php echo $info; ?>
修复php之后，尝试编辑这个JS部分：
$.ajax({
type: "post",
url: "scripts/search.php",
data: dataString,
success: function(data) {
console.log(data);
}
});
如果您的PHP脚本返回HTML标记或打印HTML，您可以使用jQuery中的.append（）或.prepend（）函数将数据附加到正文上，如：
$.ajax({
type: "post",
url: "scripts/search.php",
data: dataString,
success: function(data) {
$('body').append(data);
}
});
要显示一些CSS动画，我认为您需要将.addClass（）用于您想要制作动画的元素。
答案 1 :(得分：1)
问题是您发送的帖子数据。变化
var dataString = document.getElementById("searchBox").value;
要
var dataString = $("#searchbar").serialize();
您的search.php期待$ _POST ['searchBox']
中的值if(isset($search)){...
但从未找到它，因此它会跳过整个搜索过程