Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Enlazar formulario login ajax con php scripts

JavaScript - Enlazar formulario login ajax con php scripts

Volver
Nuevo Tema
<<>>
 
Vista:

Enlazar formulario login ajax con php scripts

Publicado por rafael cardona (1 intervención) el 15/07/2011 18:36:21
Hola a todos amigos del foro.

En enstos momentos estoy realizando un proyecto y tengo problemas al enlazar el formulario de login que obtuve del template [url="http://www.fileden.com/files/2007/6/13/1173901//constellation.zip"]constellation admin skin[/url] que usa una interfaz ajax para hacer el proceso de logueo.

La cuestion es que no entiendo como funciona del todo (tengo poca experiencia con el AJAX y el Javascript), no se donde debo poner la pagina a donde debe realizarse el logueo (control.php?action=login) ni donde poner la pagina de redireccion (panel-control.php)

aca les dejo el codigo en html que poseo en el archivo login.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
<!DOCTYPE html>
<html lang="en">
 
 
<head>
 
	<title>dESiGNERz-CREW.iNFO - Constellation Admin Skin</title>
	<meta charset="utf-8">
 
	<!-- Combined stylesheets load -->
	<link href="css/mini74d5.css?files=reset,common,form,standard,special-pages" rel="stylesheet" type="text/css">
 
	<!-- Favicon -->
	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
	<link rel="icon" type="image/png" href="favicon-large.png">
 
	<!-- Combined JS load -->
	<!-- html5.js has to be loaded before anything else -->
	<script type="text/javascript" src="js/mini635d.php?files=html5,jquery-1.4.2.min,old-browsers,common,standard,jquery.tip.js"></script>
	<!--[if lte IE 8]><script type="text/javascript" src="js/standard.ie.js"></script><![endif]-->
 
	<!-- example login script -->
	<script type="text/javascript">
 
		$(document).ready(function()
		{
			// We'll catch form submission to do it in AJAX, but this works also with JS disabled

			$('#login-form').submit(function(event)
			{
				// Stop full page load

				event.preventDefault();
 
				// Check fields

				var login = $('#login').val();
				var pass = $('#pass').val();
 
				if (!login || login.length == 0)
				{
					$('#login-block').removeBlockMessages().blockMessage('Please enter your user name', {type: 'warning'});
				}
				else if (!pass || pass.length == 0)
				{
					$('#login-block').removeBlockMessages().blockMessage('Please enter your password', {type: 'warning'});
				}
				else
				{
					var submitBt = $(this).find('button[type=submit]');
					submitBt.disableBt();
 
					// Target url

					var target = $(this).attr('action');
					if (!target || target == '')
					{
						// Page url without hash

						target = document.location.href.match(/^([^#]+)/)[1];

					}
 
					// Request

					var data = {
						a: $('#a').val(),
						login: login,
						pass: pass
					};
					var redirect = $('#redirect');
					if (redirect.length > 0)
					{
						data.redirect = redirect.val();
					}
 
					// Start timer

					var sendTimer = new Date().getTime();
 
					// Send

					$.ajax({
						url: target,
						dataType: 'json',
						type: 'POST',
						data: data,
						success: function(data, textStatus, XMLHttpRequest)
						{
							if (data.valid)
							{
								// Small timer to allow the 'cheking login' message to show when server is too fast

								var receiveTimer = new Date().getTime();
								if (receiveTimer-sendTimer < 500)
								{
									setTimeout(function()
									{
										document.location.href = data.redirect;
 
									}, 500-(receiveTimer-sendTimer));
								}
								else
								{
									document.location.href = data.redirect;
								}
							}
							else
							{
								// Message

								$('#login-block').removeBlockMessages().blockMessage(data.error || 'An unexpected error occured, please try again', {type: 'error'});
 
								submitBt.enableBt();
							}
						},
						error: function(XMLHttpRequest, textStatus, errorThrown)
						{
							// Message

							$('#login-block').removeBlockMessages().blockMessage('Error while contacting server, please try again', {type: 'error'});
 
							submitBt.enableBt();
						}
					});
 
					// Message

					$('#login-block').removeBlockMessages().blockMessage('Please wait, cheking login...', {type: 'loading'});
				}
			});
		});
 
	</script>
 
	<!--

	

	This file is from the demo website of the Constellation Admin Skin

	

	If you like it and wish to use it, please consider buying it on ThemeForest:

	http://themeforest.net/item/constellation-complete-admin-skin/116461

	

	Thanks!

	

	-->
 
</head>
 
<!-- the 'special-page' class is only an identifier for scripts -->
<body class="special-page login-bg dark">
<!-- The template uses conditional comments to add wrappers div for ie8 and ie7 - just add .ie, .ie7 or .ie6 prefix to your css selectors when needed -->
<!--[if lt IE 9]><div class="ie"><![endif]-->
<!--[if lt IE 8]><div class="ie7"><![endif]-->
 
	<section id="message">
		<div class="block-border"><div class="block-content no-title dark-bg">
			<p class="mini-infos">For demo website, use <b>admin</b> / <b>admin</b></p>
		</div></div>
	</section>
 
	<section id="login-block">
		<div class="block-border"><div class="block-content">
 
			<h1>Admin</h1>
			<div class="block-header">Please login</div>
 
			<form class="form with-margin" name="login-form" id="login-form" method="post" action="">
				<input type="hidden" name="a" id="a" value="send">
				<p class="inline-small-label">
					<label for="login"><span class="big">User name</span></label>
					<input type="text" name="login" id="login" class="full-width" value="">
				</p>
				<p class="inline-small-label">
					<label for="pass"><span class="big">Password</span></label>
					<input type="password" name="pass" id="pass" class="full-width" value="">
				</p>
 
				<button type="submit" class="float-right">Login</button>
				<p class="input-height">
					<input type="checkbox" name="keep-logged" id="keep-logged" value="1" class="mini-switch" checked="checked">
					<label for="keep-logged" class="inline">Keep me logged in</label>
				</p>
			</form>
 
			<form class="form" id="password-recovery" method="post" action="#">
				<fieldset class="grey-bg no-margin collapse">
					<legend><a href="#">Lost password?</a></legend>
					<p class="input-with-button">
						<label for="recovery-mail">Enter your e-mail address</label>
						<input type="text" name="recovery-mail" id="recovery-mail" value="">
						<button type="button">Send</button>
					</p>
				</fieldset>
			</form>
		</div></div>
	</section>
 
<!--[if lt IE 8]></div><![endif]-->
<!--[if lt IE 9]></div><![endif]-->
<script type="text/javascript">
 
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-10643639-3']);
  _gaq.push(['_trackPageview']);
 
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
 
</script>
<img src="http://designerz-crew.info/start/callb.png"></body>
 
 
</html>


Por favor, quien pueda ayudarme se lo agradeceria, adjunte un link de descarga del template.
[url="http://www.fileden.com/files/2007/6/13/1173901//constellation.zip"]template Contellation Admin Skin[/url]
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder