javascript - 如何通过 Ajax 将 PHP 输出返回到页面？-6ren

javascript - 如何通过 Ajax 将 PHP 输出返回到页面？

转载作者：行者123 更新时间：2023-11-28 15:08:46

我正在尝试从 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;
      }
    }

最佳答案

我认为您所需要的只是修复 PHP 脚本并修复 Ajax 调用的响应。

首先，您的 PHP 需要“echo”语句来打印一些输出。输出将被传递到 ajax 调用的响应，然后 JS 有一些 Material 可以处理。

一个例子:

<?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()。

关于javascript - 如何通过 Ajax 将 PHP 输出返回到页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37620844/

文章推荐： javascript - 无法输入IF语句

文章推荐： html - 单击时打开和关闭 mat-form-field matInput 的下划线

mysql - 从 bash 输出 sql 输出
我正在使用 OUTFILE 命令，但由于权限问题和安全风险，我想将 shell 的输出转储到文件中，但出现了一些错误。我试过的 #This is a simple shell to connect t
JAVA——程序功能为输入输出、输入输出；想让程序的功能分别为输入输入、输出、输出
我刚刚开始学习 Java，我想克服在尝试为这个“问题”创建 Java 程序时出现的障碍。这是我必须创建一个程序来解决的问题: Tandy 喜欢分发糖果，但只有 n 颗糖果。对于她给第 i 个糖果的人，
c++ - 无法使用 ostream 输出 C++ 输出 vector
你好，我想知道我是否可以得到一些帮助来解决我在 C++ 中打印出 vector 内容的问题我试图以特定顺序在一个或两个函数调用中输出一个类的所有变量。但是我在遍历 vector 时收到一个奇怪的错误
gradle - 重复生成的类 gradle 输出 (build/...) 与 intellij 输出 (out/...)
我正在将 intellij (2019.1.1) 用于 java gradle (5.4.1) 项目，并使用 lombok (1.18.6) 来自动生成代码。 Intellij 将生成的源放在 out
javascript - 如何从 JavaScript 输出 JSON 输出，以便将其识别为 JSON？
编辑:在与 guest271314 交流后，我意识到问题的措辞(在我的问题正文中)可能具有误导性。我保留了旧版本并更好地改写了新版本背景: 从远程服务器获取 JSON 时，响应 header 包含一
java - StoredProcedureCall 1x Varchar 输出 1x Cursor 输出
我的问题可能有点令人困惑。我遇到的问题是我正在使用来自 Java 的 StoredProcedureCall 调用过程，例如: StoredProcedureCall call = new Store
com - COM IDL定义中[输入，输出]和[输出，检索]之间的差异
在我使用的一些IDL中，我注意到在方法中标记返回值有2个约定-[in, out]和[out, retval]。当存在多个返回值时，似乎使用了[in, out]，例如: HRESULT MyMetho
linux - 我如何告诉 `gar` 或 `ar` 输出 `elf32-i386` 输出？
当我查看 gar -h 的帮助输出时，它告诉我: [...] gar: supported targets: elf64-x86-64 elf32-i386 a.out-i386-linux [...
r - Knitr HTML Loop - 一些 HTML 输出，一些 R 输出
我想循环遍历一个列表，并以 HTML 格式打印其中的一部分，以代码格式打印其中的一部分。所以更准确地说:我想产生与这相同的输出 1 is a great number 2 is a great
"Error running git [init /workspace/output/]: exit status 1\n/workspace/output/.git: Permission denied\n"(“运行git[init/工作区/输出/]时出错：退出状态1\n/工作区/输出/.git：权限被拒绝\n”)
我有下面的tekton管道，并尝试在Google Cloud上运行。集群角色绑定。集群角色。该服务帐户具有以下权限。。例外。不确定需要为服务帐户设置什么权限。
Grepping 输出
当尝试从 make 过滤非常长的输出以获取特定警告或错误消息时，第一个想法是这样的: $ make | grep -i 'warning: someone set up us the bomb' 然而
Kotlin中抽象容器工具的泛型输入/输出？
我正在创建一个抽象工具类，该类对另一组外部类(不受我控制)进行操作。外部类在某些接口(interface)点概念上相似，但访问它们相似属性的语法不同。它们还具有不同的语法来应用工具操作的结果。我创建了
Python奇怪的按位与(&)输出
这个问题已经有答案了: What do numbers starting with 0 mean in python? (9 个回答) 已关闭 7 年前。在我的代码中使用按位与运算符 (&) 时，我
Python文件输入/输出
我写了这段代码来解析输入文件中的行输入格式:电影 ID 可以有多个条目，所以我们应该计算平均值输出:**没有重复(这是问题所在) import re f = open("ratings2.txt",
更高效的Python输入/输出
我需要处理超过 1000 万个光谱数据集。数据结构如下:大约有 1000 个 .fits(.fits 是某种数据存储格式)文件，每个文件包含大约 600-1000 个光谱，其中每个光谱中有大约 450
C编程频率计数器输入/输出
我编写了一个简单的 C 程序，它读取一个文件并生成一个包含每个单词及其出现频率的表格。该程序有效，我已经能够在 Linux 上运行的终端中获得显示的输出，但是，我不确定如何获得生成的显示以生成包含词
C语言音频输入/输出
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
python中的print()输出
1.普通的输出： print(str)#str是任意一个字符串，数字··· 2.格式化输出： ?
logstash 简单文件输入/输出
我无法让 logstash 正常工作。 Basic logstash Example作品。但后来我与 Advanced Pipeline Example 作斗争.也许这也可能是 Elasticsear
audio - 快速音频输入/输出
这是我想要做的: 我想让用户给我的程序一些声音数据(通过麦克风输入)，然后保持 250 毫秒，然后通过扬声器输出。我已经使用 Java Sound API 做到了这一点。问题是它有点慢。从发出声音到

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何通过 Ajax 将 PHP 输出返回到页面？