- Може ли да добавим POST функция към този JS/Ajax логин?
WT форуми -> HTML / Javascript / CSS -> Може ли да добавим POST функция към този JS/Ajax логин?
Създайте нова тема Напишете отговор 
Автор Съобщение
taxi
Турист
Турист

Регистриран на: 28/08/2008 3:48 pm

Support: 4
Bonus: 8
Мнения: 518
Мнение 11/10/2017 10:19 pm     Може ли да добавим POST функция към този JS/Ajax логин? Отговорете с цитат


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

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
Активен
Активен

Регистриран на: 25/12/2012 12:03 pm

Support: 126
Bonus: 252
Мнения: 768
Мнение 13/10/2017 10:52 am      Отговорете с цитат


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

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

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

После го направи това и за 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 нещо такова.
Javascript code:

$('.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();
}
});
});


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

Регистриран на: 28/08/2008 3:48 pm

Support: 4
Bonus: 8
Мнения: 518
Мнение 16/10/2017 2:49 am      Отговорете с цитат


joTunkiq написа:


Да почнем на ново. Грешката наистина беше моя, защото това горе го свалих и директно го копирах с мисълта, че някой може да ми обясни, как му се добавя $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>
Върнете се в началото
Вижте профила на потребителя Изпратете лично съобщение
Покажи мнения от преди:    
Създайте нова тема   Напишете отговор    web-tourist.net Форуми -> HTML / Javascript / CSS Часовете са според зоната GMT + 2 Часа
Страница 1 от 1


 
Идете на:  
Не Можете да пускате нови теми
Не Можете да отговаряте на темите
Не Можете да променяте съобщенията си
Не Можете да изтривате съобщенията си
Не Можете да гласувате в анкети