Може ли да добавим POST функция към този JS/Ajax логин?

taxi · 11 Октомври 2017

Имам този логин, можем ли към него да добавим логин функция и все още да функционира, както в момента?

index

Код:

<html >
<head>
<meta charset="UTF-8">
</head>
<body>
  <div class="wrapper">
  <form class="login">
    <p class="title">Вход</p>
    <input type="text" placeholder="Потребител" autofocus/>
    <i class="fa fa-user"></i>
    <input type="password" placeholder="Парола" />
    <i class="fa fa-key"></i><br />
    <a href="#">Регистрирай се</a><br />
	<a href="#">Забравена парола</a><br />
    <button>
      <i class="spinner"></i>
      <span class="state">Влез</span>
    </button>
  </form>
  <footer>
  </footer>
  </p>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>

js/index.js

Код:

var working = false;
$('.login').on('submit', function(e) {
  e.preventDefault();
  if (working) return;
  working = true;
  var $this = $(this),
    $state = $this.find('button > .state');
  $this.addClass('loading');
  $state.html('Проверка...');
  setTimeout(function() {
    $this.addClass('ok');
    $state.html('Добре Дошли!');
    setTimeout(function() {
      $state.html('Log in');
      $this.removeClass('ok loading');
      working = false;
	  	location.reload();
    }, 1300);
  }, 2500);
});

joTunkiq · 13 Октомври 2017

Иска ми се да ти отговоря точно на въпроса и да ти кажа.. ДА МОЖЕ, но тъй като си да дал кода, за разлика от други колеги, които не го правят а искат помощ. Ще ти хелпна

Започни от html-а направи го да работи БЕЗ ajax и след това си добави javascrippt-а.

нямаш изходна точка на формата(да праща някъде - примерно до login.php), нито метод, нито бутона ти е от тип субмит (сега като се натиска няма да прати формата). А да, и инпут полеттата ти нямат име ?! Яяя изгледай някви уроци за начинаещи.. :!:

После го направи това и за Jquery-то дето си копнал.

НЕщп такова :

<form class="login" id="loginform" method="post" action="login.php">
<p class="title">Вход</p>
<input type="text" name="username" placeholder="Потребител" autofocus/>
<i class="fa fa-user"></i>
<input type="password" name="password" placeholder="Парола" />
<i class="fa fa-key"></i><br />
<a href="#">Регистрирай се</a><br />
<a href="#">Забравена парола</a><br />
<button type='submit'>
<i class="spinner"></i>
<span class="state">Влез</span>
</button>
</form>

I jquery-to нещо такова.
[js]
$('.login').on('submit', function(e) {
e.preventDefault();
if (working) return;
working = true;
var $this = $(this),
$state = $this.find('button > .state');
$this.addClass('loading');
$state.html('Проверка...');
$.post('login.php', {'username': $('#loginform [name=username]').val(), 'password': $('#loginform [name=password]').val()}, function(response){
if(response == 'ok')
{
$this.addClass('ok');
$state.html('Добре Дошли!');
}
else
{
$state.html('Log in');
$this.removeClass('ok loading');
working = false;
location.reload();
}
});
});[/js]

Кода няма да работи, защото както ти обясних имаш сериозни пропуски. Предполагам нямаш php скрипт който да се грижи са логването на потребителя, затова толкова. Като изгледаш малко уроци за хтмл и формите, и базова работа с Jquery, добре айде, иии като си наясно как се прави логин функция с php тогава вече може да си зададеш въпроса и някой да ти хелпне.

успех :?:

taxi · 16 Октомври 2017

Да почнем на ново. Грешката наистина беше моя, защото това горе го свалих и директно го копирах с мисълта, че някой може да ми обясни, как му се добавя $post с проверки за грешка, пък аз после да си го преправя в моя си логин.
Таа искам да ми вади текста, както сега с тайминг и обратна връзка, ако нещо не е както трябва.(празни полета/грешни данни) Ето работещ за мен код, който след добре дошли ме логва.

логина

Код:

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<form class="login" id="loginform" method="post">
            <label for="username">Потребител</label><input type="text" name="username" id="username" /><br />
            <label for="password">Парола</label><input type="password" name="password" id="password" /><br />
<button type='submit'>
      <span class="state">Влез</span>
</button>
    </form>

скрипта

Код:

  <script>
  $('.login').on('submit', function(e) {
  var working = false;
  e.preventDefault();
  if (working) return;
  working = true;
  var $this = $(this),
    $state = $this.find('button > .state');
  $this.addClass('loading');
  $state.html('Проверка...');
  setTimeout(function() {
    $this.addClass('ok');
    $state.html('Добре Дошли!');
	$.post('login.php', $('#loginform').serialize(), function(html) {
		window.location.href = "index.php";
	});
    setTimeout(function() {
      $state.html('Log in');
      $this.removeClass('ok loading');
      working = false;
        location.reload();
    }, 1300);
  }, 2500);
});
</script>

Може ли да добавим POST функция към този JS/Ajax логин?

taxi

Registered

joTunkiq

Registered

taxi

Registered