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

Post Reply
taxi
Турист
Турист
Posts: 522
Joined: Thu Aug 28, 2008 1:48 pm
Location: България

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

Post by taxi » Wed Oct 11, 2017 8:19 pm

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

index

Code: Select all

<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&#58;//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

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

</body>
</html>
js/index.js

Code: Select all

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

joTunkiq
Потребител
Потребител
Posts: 825
Joined: Tue Dec 25, 2012 10:03 am
Answers: 142
Contact:

Post by joTunkiq » Fri Oct 13, 2017 8:52 am

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

Започни от 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
Турист
Турист
Posts: 522
Joined: Thu Aug 28, 2008 1:48 pm
Location: България

Post by taxi » Mon Oct 16, 2017 12:49 am

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


логина

Code: Select all

<script src='http&#58;//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>
скрипта

Code: Select all

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

Post Reply