如何通过Ajax将PHP输出返回到页面？
[英]How to get my PHP output back to a page via Ajax?
问题描述
我正在尝试从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;
}
}
2 个解决方案
解决方案1
3 2016-06-03 18:24:07
我认为您所需要的只是修复PHP脚本并修复来自Ajax调用的响应。
首先，您的PHP需要使用'echo'语句来打印一些输出。 输出将传递给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（）。
解决方案2
1 2016-06-03 18:53:38
问题是您发送的帖子数据。 更改
var dataString = document.getElementById("searchBox").value;
至
var dataString = $("#searchbar").serialize();
您的search.php需要$ _POST ['searchBox']中的值
if(isset($search)){...
但从未找到它，因此它跳过了整个搜索过程
如何通过ajax调用从上一页发送的php页面中获取变量
[英]How to get the variables in php page sent from previous page via ajax call
如何使用ajax从我的php页面上的远程服务器输出脚本文件
[英]How to output script file from remote sever on my php page using ajax
我如何在我的页面上显示我的php响应而不用ajax刷新？
[英]How do i get to show my php response on my page without refreshing with ajax?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.