ajax abfrage in zwei verschieden DIVs mit jquery lösbar?

grillfleisch

Erfahrenes Mitglied
Hallo,

kann man mit jquery und seiner ajax_function die Daten der geladenen Datei aufsplitten und in zwei verschiede div laden?

HTML:
$.ajax({
  type: 'POST',
  url: 'blog_abfrage.php?next='+escape(num),
  data: text,
  success: function(data) {
    $('#links').html(data);
    $('#rechts').html(data);
  }
});

<body>
    
        <div id="left"></div>
        <div id="right"></div>
      
      <form methode="post" name="ajax">
        <button type="submit" id="send" name="send" value="senden">ältere Beiträge</button>
      </form>
  </body>

PHP:
<?php
        $next = $_GET['next'];
        include_once('miri_v3/class/db_class.php');
        include_once('miri_v3/function/formattext_func.php');
        include_once('miri_v3/function/smily_func.php');
        include_once('miri_v3/config.php');  #datenbank daten
        
        /*+++++++++++++++++++++++ !IMPORTENT die Klasse muss vor der MYSQL abfrage $gesamtanzahl stehen, sonst kein Datenbankconncet!*/
        //start der ersten Instanz der Klasse
        $mydb = new datenbank($db_host,$db_name,$db_user,$db_password);
        //Datenbankabfrag für die links Seite
        // mit WHERE (Modulus) = 0 um nur jeden zweiten Eitrag zubekommen
        $mydb->db_query('SELECT * FROM `name` WHERE ( id % 2 ) = 0 ORDER BY `time` DESC LIMIT '.$next.' ');
        
        //anzahl aller Einträge abfragen / ich benutze ihn für testzwecke. Könnte aber auch interessant sein
        $gesamtanzahl = mysql_num_rows(mysql_query('SELECT * FROM `name`'));
        /*+++++++++++++++++++++++ !IMPORTENT die Klasse muss vor der MYSQL abfrage $gesamtanzahl stehen, sonst kein Datenbankconncet!*/
      ?>
        
        <?php
                    
          $number=$gesamtanzahl; //dient nur zu testzwecken!
          while($row = $mydb->db_fetch())
          {
              
              include('title_bilder.php');
      
              $time = date("H:i",$row['time']);
              $date = date("d.m.Y",$row['time']);
              $text = formatText($row['text']);
              
              echo '<div class="linesite_inner">';
              echo '<p class="boxtitle">'.$row['title'].'  |NR #'.$number.' |ID #'.$row['id'].'</p>'; //hier findet der Test statt
              echo '<p class="right"> '.$date.', '.$time.'h</p>'; 
              echo '<p class="text">'.$text.''.$text2.'</p>';
              echo '</div>';
              
              #print_r($row);  
              $number=$number-2;
          }
          ?>
        
        
          <?php
          //start der zweiten Instanz der Klasse
          $mydb2 = new datenbank($db_host,$db_name,$db_user,$db_password);
          
          //Datenbankabfrag für die links Seite
          // WHERE (Modulus) = 1 um nur jeden zweiten Eitrag zubekommen
          $mydb2->db_query('SELECT * FROM `name` WHERE ( id % 2 ) = 1 ORDER BY `time` DESC LIMIT '.$next.''); 
          
          $number2=$gesamtanzahl-1; 
          while($row2 = $mydb2->db_fetch())
          {
              
              include('title_bilder.php');
              
              $time = date("H:i",$row2['time']);
              $date = date("d.m.Y",$row2['time']);
              $text = formatText($row2['text']);
              
              echo '<div class="linesite_inner">';
              echo '<p class="boxtitle">'.$row2['title'].'  |NR #'.$number2.'|ID # '.$row2['id'].'</p>';
              echo '<p class="right"> '.$date.', '.$time.'h</p>'; 
              echo '<p class="text">'.$text.''.$text2.'</p>';
              echo '</div>';
              
              #print_r($row);
              
              $number2=$number2-2;
          }
        
        #echo $mydb->count();
  ?>


Ich hatte es schon, dass es funktionierte, nur ich möchte nicht immer wieder den ganzen Content immer wieder neuladen, also erst die ersten zwei Einträge, dann die nächsten zwei, also alle 4 Laden, beim nächsten wieder zwei, ergo alle 6 laden usw. .
Ich würde gern, dass er immer nur die nächsten nachlädt und dies dann noch mit fadeIn Anzeigt.
 
Das geht ziemlich simpel.
Mit der javascript Funktion .split kannst du einen String in mehrere Teile aufteilen:
Javascript:
str = "Das, ist, mein, String";
parts = str.split(",");
document.write(parts[0]);//Das
document.write(parts[1]);//ist
document.write(parts[2]);//mein
document.write(parts[3]);//String
 
Das geht ziemlich simpel.
Mit der javascript Funktion .split kannst du einen String in mehrere Teile aufteilen:
Javascript:
str = "Das, ist, mein, String";
parts = str.split(",");
document.write(parts[0]);//Das
document.write(parts[1]);//ist
document.write(parts[2]);//mein
document.write(parts[3]);//String

Danke dir für deine Antwort, habe mir die split Technik ein wenig angeschaut und frage mich gerade ob das mir überhaupt was nützt. Ich bekomme ja nicht nur ein paar zweilen Text aus der Datei, sondern ich bekomme 4 Blogeinträge mit Div`s, <p>`s, Bildern, videos und Text, ich glaub nicht das ich die in einen String packen kann, und dann einfach so mit

Javascript:
document.write(str.split() + "<br />");
document.write(str.split(" ") + "<br />");
document.write(str.split("") + "<br />");
document.write(str.split(" ",3));

formatieren kann.


Ich denke das ich wohl oder übel zwei $.ajax abfragen starten muss, die eine für die links spalte, die andere für die rechte spalte :(
 
Du kannst die Beiträge auch in ein JSON oder XMl-Objekt verwandeln:
Javascript:
{
  "left": "long html string",
  "right": "long html string"
}
XML:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<content>
  <left>long html string</left>
  <right>long html string</right>
</content>
Und dann jeweils mit JavaScript drauf zugreifen.

Übrigens hast du in deinem Skript eine Sicherheitslücke, da du $_GET['next'] einfach so im SQL-Query benutzt!
Lieber mit [phpf]intval[/phpf] entschärfen und auch gleich mit [phpf]isset[/phpf] auf Existenz prüfen:
PHP:
$next = isset($_GET['next']) ? intval($_GET['next']) : 0;
 
Zuletzt bearbeitet von einem Moderator:
Ansonsten: nutze niemals document.write() oder document.writeln(), weil das ein sehr schlechter Stil ist. Nutze lieber innerHTML auf den Knoten, unter dem die Inhalte ausgegeben werden sollen.
 
Du kannst die Beiträge auch in ein JSON oder XMl-Objekt verwandeln:
Javascript:
{
  "left": "long html string",
  "right": "long html string"
}
XML:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<content>
  <left>long html string</left>
  <right>long html string</right>
</content>
Und dann jeweils mit JavaScript drauf zugreifen.

Übrigens hast du in deinem Skript eine Sicherheitslücke, da du $_GET['next'] einfach so im SQL-Query benutzt!
Lieber mit [phpf]intval[/phpf] entschärfen und auch gleich mit [phpf]isset[/phpf] auf Existenz prüfen:
PHP:
$next = isset($_GET['next']) ? intval($_GET['next']) : 0;


Hallo,

wie meinst du das genau mit json? Meinst du ich stecke die Daten, aus der Datenbank, in ein array, und lese es dann in der index.html mit

PHP:
echo json_encode($PHPvariable);

wieder aus?
Funktioniert das überhaupt?

Danke nochmal mit dem Tip des Sicherheitsprolemes, dass war eigentlich nur ein test, noch nicht ganz fertig :D ... Da ich immer nur einen Teil aus der Datenbank laden möchte.
 
Zuletzt bearbeitet von einem Moderator:
Hallo an alle,

ich habe es geschafft! :D

Ich muss jedoch gestehen, dass ich mich mit JSON nun nicht weiter auseinander gesetzt habe, da ich zuviel hätte ändern müssen :) und das auch noch mit dem Risiko, nochmal Fehler zu machen bzw. nochmal euch Löscher in den Bauch zu fragen ;)


Was genau macht das Script? Es ließt meine Blogeinträge dynamisch aus einer Datenbank und schiebt diese in eine linke und in eine rechte Spalte. Das sieht dann ein wenig wie ne timeline aus ;) . Man muss nur ein paar style sachen ändern und dann gut.
Wenn man die Seite betritt sieht man die ersten 4 Einträge. Wenn man mehr lesen möchte, klickt man auf den Button -> ältere Einträge und es werden die nächsten 4 aktuelleren Einträge geladen.

Inhalt der Index.php

Javascript:
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript">
      $(document).ready( function() {
      
        $(function() {
          $('.send').live("click",function() {
            var ID = $(this).attr("id");
            
            if(ID>1) {
              
              $("#more"+ID).html('<img src="moreajax.gif" />');
              
              $.ajax({
                type: "POST",
                url: "blog_abfrage2.php",
                data: "next="+ ID,
                cache: false,
                success: function(html) {
                  $("#content").append(html);
                  $("#more"+ID).remove(); // löscht den alten next button
                }
              });
            }
            else
            {
              $(".morebox").html('Ende');// keine weiteren Ergebnisse
            }
            return false;
          });
        });							
      });
      </script>

in der index.php die Abfrage ohne ID bedingung inder WHERE Klausel

PHP:
<div id="content">
        <?php
        include_once('miri_v3/class/db_class.php');
        include_once('miri_v3/function/formattext_func.php');
        include_once('miri_v3/function/smily_func.php');
        include_once('miri_v3/config.php');  #datenbank daten
        
        //start der ersten Instanz der Klasse
        $mydb = new datenbank($db_host,$db_name,$db_user,$db_password);
        //Datenbankabfrag für die links Seite
        // mit WHERE (Modulus) = 0 um nur jeden zweiten Eitrag zubekommen
        $mydb->db_query('SELECT * FROM `test` WHERE ( id % 2 ) = 0 ORDER BY `id` DESC LIMIT 2 ');
        
        //anzahl aller Einträge abfragen / ich benutze ihn für testzwecke. Könnte aber auch interessant sein
        $gesamtanzahl = mysql_num_rows(mysql_query('SELECT * FROM `test`'));

      ?>
        <div id="left">
        <?php
                    
          $number=$gesamtanzahl; //dient nur zu testzwecken!
          while($row = $mydb->db_fetch())
          {
              
              include('title_bilder.php');
      
              $time = date("H:i",$row['time']);
              $date = date("d.m.Y",$row['time']);
              $text = formatText($row['text']);
               
              echo '<div class="linesite_inner">';
              echo '<p class="boxtitle">'.$row['title'].'  |NR #'.$number.' |ID #'.$row['id'].'</p>'; //hier findet der Test statt
              echo '<p class="right"> '.$date.', '.$time.'h</p>'; 
              echo '<p class="text">'.$text.''.$text2.'</p>';
              echo '</div>';
                
              #print_r($row);  
              $number=$number-2;
          }
          ?>
        </div>
        <div id="right">
          <?php
          //start der zweiten Instanz der Klasse
          $mydb2 = new datenbank($db_host,$db_name,$db_user,$db_password);
          
          //Datenbankabfrag für die rechte Seite
          // WHERE (Modulus) = 1 um nur jeden zweiten Eitrag zubekommen
          $mydb2->db_query('SELECT * FROM `test` WHERE ( id % 2 ) = 1 ORDER BY `id` DESC LIMIT 2'); 
          
          $number2=$gesamtanzahl-1; 
          while($row2 = $mydb2->db_fetch())
          {
              
              include('title_bilder.php');
              
              $time = date("H:i",$row2['time']);
              $date = date("d.m.Y",$row2['time']);
              $text = formatText($row2['text']);
              $next = $row2['id'];
              echo '<div class="linesite_inner">';
              echo '<p class="boxtitle">'.$row2['title'].'  |NR #'.$number2.'|ID # '.$row2['id'].'</p>';
              echo '<p class="right"> '.$date.', '.$time.'h</p>'; 
              echo '<p class="text">'.$text.''.$text2.'</p>';
              echo '</div>';
              
              #print_r($row);
              
              $number2=$number2-2;
          }
        
        #echo $mydb->count();
        ?>
          </div>
          <div class="clear"></div>
        </div><!--hier wird der Content geladen-->


Hier die blog_abfrage.php die per ajax nachgeladen werden soll mit WHERE id < $next

PHP:
<?php
      if(isset($_POST['next']))
      {
      $next = $_POST['next'];
      $next = intval($next);
        
        include_once('miri_v3/class/db_class.php');
        include_once('miri_v3/function/formattext_func.php');
        include_once('miri_v3/function/smily_func.php');
        include_once('miri_v3/config.php');  #datenbank daten
        
        //start der ersten Instanz der Klasse
        $mydb = new datenbank($db_host,$db_name,$db_user,$db_password);
        //Datenbankabfrag für die links Seite
        // mit WHERE (Modulus) = 0 um nur jeden zweiten Eitrag zubekommen
        $mydb->db_query('SELECT * FROM `test` WHERE ( id % 2 ) = 0 AND id < '.$next.' ORDER BY `id` DESC LIMIT 2 ');
        
        //anzahl aller Einträge abfragen / ich benutze ihn für testzwecke. Könnte aber auch interessant sein
        $gesamtanzahl = mysql_num_rows(mysql_query('SELECT * FROM `test`'));

      ?>
        <div id="left">
        <?php
                    
          $number=$gesamtanzahl; //dient nur zu testzwecken!
          while($row = $mydb->db_fetch())
          {
              
              include('title_bilder.php');
      
              $time = date("H:i",$row['time']);
              $date = date("d.m.Y",$row['time']);
              $text = formatText($row['text']);
           
              echo '<div class="linesite_inner">';
              echo '<p class="boxtitle">'.$row['title'].'  |NR #'.$number.' |ID #'.$row['id'].'</p>'; //hier findet der Test statt
              echo '<p class="right"> '.$date.', '.$time.'h</p>'; 
              echo '<p class="text">'.$text.''.$text2.'</p>';
              echo '</div>';
                
              #print_r($row);  
              $number=$number-2;
          }
          ?>
        </div>
        <div id="right">
          <?php
          //start der zweiten Instanz der Klasse
          $mydb2 = new datenbank($db_host,$db_name,$db_user,$db_password);
          
          //Datenbankabfrag für die rechte Seite
          // WHERE (Modulus) = 1 um nur jeden zweiten Eitrag zubekommen
          $mydb2->db_query('SELECT * FROM `test` WHERE ( id % 2 ) = 1 AND id < '.$next.' ORDER BY `id` DESC LIMIT 2'); 
          
          $number2=$gesamtanzahl-1; 
          while($row2 = $mydb2->db_fetch())
          {
              
              include('title_bilder.php');
              
              $time = date("H:i",$row2['time']);
              $date = date("d.m.Y",$row2['time']);
              $text = formatText($row2['text']);
              
              $next = $row2['id']; // id auslesen für den next-beitrag-button weiter unten :D
              
              echo '<div class="linesite_inner">';
              echo '<p class="boxtitle">'.$row2['title'].'  |NR #'.$number2.'|ID # '.$row2['id'].'</p>';
              echo '<p class="right"> '.$date.', '.$time.'h</p>'; 
              echo '<p class="text">'.$text.''.$text2.'</p>';
              echo '</div>';
              
              #print_r($row);
              
              $number2=$number2-2;
          }
        
        #echo $mydb->count();
        echo '</div>'; // div right ende
        
        echo '<div class="clear"></div>';
        echo '<div id="more'.$next.'" class="morebox">
                <a href="#" id="'.$next.'" class="send">ältere Beiträge</a>
              </div>';
      }
?>
 
Zuletzt bearbeitet:
Einen kleinen Bemerk hätte ich jedoch: IDs dürfen in HTML nicht nur aus Ziffern bestehen und müssen mit einem Buchstaben beginnen.
 

Neue Beiträge

Zurück