JavaScript Dynamischen Inhalt laden

-Rayz- · 22. Oktober 2010

Seit ein paar Tagen beschäftige ich mich mit jQuery und nun komme ich nicht weiter. Ich habe z.Z drei Datein ( index.php ,layout.css und login.php).
Auf der Index.php habe ich einen 'content' Bereich wo der Inhalt von login.php reingeladen wird. Sobald der Submit Button gedrückt wird im login.php soll die login.php selber wieder aufrufen und im 'content' bereich ausgegeben werden. Leider bekomme ich aber keine Ausgabe hin. Hier erstmal der Code:

index.php

PHP:

<html>
    <head><title>index</title>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<link rel="stylesheet" type="text/css" href="css/layout.css">
	</head>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">			
	$(document).ready(function() {

		$('#content').load("login.php","")		

			$("#menu li a").click(function(){
				$contentToLoad = $(this).attr("href");
				$('#content').load($contentToLoad+".php", "")				
				return false;
			})			
	});
	
    </script> 
    <body >
        <div class="header">
			<img src="resources/image/dblayout/logo_left.jpg" align="left" alt="Logo">
            <span id="Text">DEGREE &</span>
            <span id="Text2">TRAINEE DATABASE</span>
        </div>       	
		<div id="menu">
			<ul>
				<li><a href="login">Login</a></li>
			</ul>
		</div>		
		<div id="naviline"></div>	
        <div id="content">
			
		</div>
            
    </body>
</html>

login.php

PHP:

<script type="text/javascript">
	$("#submit").click(function(){
		var name = $('input[name=fld_name]');
		var pass = $('input[name=fld_password]');
		var data = 'name=' + name.val() + '&pass=' + pass.val();
		
		$.ajax({
			type: "POST",
			url: "login.php?Form=gesendet",
			data: data,
			success: function(){
				$("#content").html();
			}
		});               
	});
</script>
<?php
$Form = $_POST['gesendet'];
$Name = $_POST['fld_name'];
$Pass = $_POST['fld_password'];

if($Form!="gesendet")
{
?>
<div id="formular">
	<form method="POST" action="">
		<table>			
			<tr>
				<td colspan="2" style="background-color:#d8d8d8; padding:5px;"><b>Login</b></td>
			</tr>			
			<tr>
				<td>Name:</td>
				<td><input type="text" name="fld_name" size="35"></td>
			</tr>
			<tr>
				<td>Passwort:</td>
				<td><input type="password" name="fld_password" size="35"></td>
			</tr>
			<tr>
				<td><br /><input id ="submit" type="submit" name="login" value="Einloggen"></td>
			</tr> 
		</table>
	</form>
</div>
<?php
}
if ($Form == "gesendet")
{
	echo "<b>Name: </b>".$Name."<br>";
}	
?>

Testweise wollte ich einfach nur den Namen ausgeben. Ich denke ja mal, dass login.php den 'content' Bereich gar nicht kennt da er ja in der index.php steht. Aber wie lade ich dann den Inhalt in den Content-Bereich? Die Daten sollen auch in der login.php verarbeitet werden.

floq0r · 22. Oktober 2010

was mir schon einmal auffällt:

ändere in der login.php

Code:

$Form = $_POST['gesendet'];
$Name = $_POST['fld_name']; 
$Pass = $_POST['fld_password'];

durch

Code:

$Form = $_POST['Form'];
$Name = $_POST['name']; 
$Pass = $_POST['pass'];

schau dir mal an, wie die post-variablen heißen, die du versendest

-Rayz- · 22. Oktober 2010

Ach verdammt hab ich vergessen zu ändern. Ausgegeben wird aber dennoch nichts. Es wird irgendwie nur die Seite neugeladen.

NullPointer · 22. Oktober 2010

Ich vermute, daß durch das Abschicken des Formulars die Seite neu geladen wird. Dadurch würde der alte Inhalt - mitsamt dem laufenden Skript - einfach verdrängt.

Ergänze deinen click()-Handler für den Abschicken-Knopf mal um ein

Code:

return false;

Das könnte helfen.

-Rayz- · 22. Oktober 2010

Ok der Code sieht nun so aus:

PHP:

<script type="text/javascript">
	$("#submit").click(function(){
		var name = $('input[name=fld_name]');
		var pass = $('input[name=fld_password]');
		var data = 'name=' + name.val() + '&pass=' + pass.val();
		
		$.ajax({
			type: "POST",
			url: "login.php?Form=gesendet",
			data: data,
			success: function(){
				$("#content").html();
			}
		}); 
		return false;
	});
</script>
<?php
$Form = $_GET['Form'];
$Name = $_POST['name'];
$Pass = $_POST['password'];

if($Form!="gesendet")
{
?>
<div id="formular">
	<form method="POST" action="">
		<table>			
			<tr>
				<td colspan="2" style="background-color:#d8d8d8; padding:5px;"><b>Login</b></td>
			</tr>			
			<tr>
				<td>Name:</td>
				<td><input type="text" name="fld_name" size="35"></td>
			</tr>
			<tr>
				<td>Passwort:</td>
				<td><input type="password" name="fld_password" size="35"></td>
			</tr>
			<tr>
				<td><br /><input id ="submit" type="submit" name="login" value="Einloggen"></td>
			</tr> 
		</table>
	</form>
</div>
<?php
}
if ($Form == "gesendet")
{
	echo "<b>Name: </b>".$Name."<br>";
}	
?>

Die Seite wird nun nicht mehr neu geladen. Allerdings lädt jetzt gar nichts mehr... irgendetwas muss ja an meinem Script falsch sein.

NullPointer · 22. Oktober 2010

Du mußt in success() auch die Antwort als Parameter entgegennehmen und in html() hineinschieben

-Rayz- · 22. Oktober 2010

Oh man... dazu fällt mir nichts mehr ein ^^.

PHP:

$.ajax({
            type: "POST",
            url: "login.php?Form=gesendet",
            data: data,
            success: function(data){
                $("#content").html(data);
            }

so funktioniert es fürs erste. Vielen Dank

. Bei weiteren Fragen werd ich mich natürlich wieder melden

Suche

JavaScript Dynamischen Inhalt laden

-Rayz-

Lieutenant

floq0r

Commander

-Rayz-

Lieutenant

NullPointer

Lt. Commander

-Rayz-

Lieutenant

NullPointer

Lt. Commander

-Rayz-

Lieutenant

Ähnliche Themen