Wie bekomme ich meine PHP-Ausgabe über Ajax zurück auf eine Seite?

Ich versuche, eine Antwort von einem PHP-Skript zurück zu bekommen, also muss ich die Seite nicht neu laden und einige Animationen anzeigen.Wie bekomme ich meine PHP-Ausgabe über Ajax zurück auf eine Seite?

Ich habe beide Teile arbeiten, aber wenn ich versuche, sie zusammenzufügen, funktioniert nichts.

Momentan sende ich die Eingabedaten über Ajax, aber ich kann die Ergebnisse nicht zurückbringen.

Bitte helfen Sie mir, danke im Voraus.

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> 
         "); 

       } 

      } 

     } 

    ?>

Die CSS falls Sie es

/* 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*/ 
    }

Und der Animationscode, wieder, falls Sie es wollen.

Quelle

2016-06-03 Ferrius

Bitte klären Sie Ihr spezifisches Problem und fügen Sie nur Details hinzu, um genau zu markieren, was Sie brauchen. Wie es derzeit geschrieben wird, ist es schwer zu sagen, was genau Sie fragen. –

Sie sind anfällig für [sql injection attacks] (http://bobby-tables.com). –

Angenommen, Sie sprechen über das, worüber Sie sprechen. Sie müssen die Antwort an Ihren 'success: function (data) {console.log (data)}' Callback zurücksenden. Je nachdem, was Sie zurücksenden (HTML, JSON usw.), müssen dann die Daten entsprechend behandelt werden. – Marcus

Ich denke, dass alles, was Sie brauchen, ist das PHP-Skript zu beheben und die Antwort von Ihrem Ajax-Aufruf zu beheben.

Zuerst müssen Sie PHP und 'Echo' Anweisung, um einige Ausgaben zu drucken. Die Ausgabe wird an die Antwort des Ajax-Aufrufs übergeben, da JS einiges an Material zum Bearbeiten hat.

Ein Beispiel:

<?php echo $info; ?>

Nach der PHP beheben, versuchen dieser Teil JS zu bearbeiten: Sie ein HTML-Markup oder drucken HTML

$.ajax({ 
    type: "post", 
    url: "scripts/search.php", 
    data: dataString, 
    success: function(data) { 
     console.log(data);     
    } 
});

Wenn Sie PHP-Skript Rückkehr, können Sie die .append() oder .prepend() Funktionen von jQuery, die Daten auf den Körper wie anhängen:

$.ajax({ 
    type: "post", 
    url: "scripts/search.php", 
    data: dataString, 
    success: function(data) { 
     $('body').append(data);     
    } 
});

um etwas CSS ani zu zeigen Ich denke, Sie müssen .addClass() zu dem Element verwenden, das Sie animieren möchten.

Quelle

2016-06-03 18:24:07

Die '> sollte am Ende meines PHP-Skripts oder meiner PHP-Seite gehen? – Ferrius

@Ferrius legte es in die php-Datei namens via Ajax –

Problem ist Ihre Post-Daten, die Sie senden. Ändern

var dataString = document.getElementById("searchBox").value;

var dataString = $("#searchbar").serialize();

Ihr search.php Wert in $ _POST erwartet [ 'searchBox']

if(isset($search)){...

aber nie findet es so sein, dass überspringt gesamten Prozess der die Suche

Quelle

2016-06-03 18:53:38

Wie bekomme ich meine PHP-Ausgabe über Ajax zurück auf eine Seite?

Antwort

Verwandte Themen