Кто шарит в ajax, json и поможет разобраться?

[ДмитрийТ]

Нужна помощь в написании ajax запроса с json ответом , для валидации логин-панели.

[Школьник]

на чистом js или Jquery.ajax? давай подробности, если что посоветовать надо помогу

[ДмитрийТ]

Делаю ajax форму авторизации для opencart
Вот форма html

<form action="<?php echo $action; ?>" method="post" id="action-log">
<p>
<label for="email"><?php echo $entry_email; ?> </label>
<input type="text" name="email" value="" />
</p>
<p>
<label for="password"><?php echo $entry_password; ?></label>
<input type="password" name="password" value=""/>

</p>
<p class="remember">

<input value="<?php echo $button_login; ?>" class="signing" type="submit"/>

<!-- <input id="remember" name="remember_me" value="1" type="checkbox"/> <input type="hidden" name="redirect" value="">-->
<label for="remember">Запомнить меня</label>
</p>
<p class="forgot"> <a href="<?php echo $forgotten; ?>"><?php echo $text_forgotten; ?></a> </p>
<p class="register"> <a title="" href="<?php echo $register; ?>"><?php echo $text_register; ?></a> </p>
</form>

вот что то типа ajax

$(document).ready(function() {
$('#action-log').submit(function(){
// прячем текст ошибок
$.ajax({
type: "POST",
dataType: "json",
url: "http://localhost/opencart/index.php?route=account/login", //Relative or absolute path to response.php file
data:$('#action-log').serialize(),
success: function(json) {
$('.warning, .error').remove();
if (json['redirect']) {
if (json['success']) {
$('#action-log').before(json['success']).remove();
setTimeout(function() {
location = json['redirect']
}, 3000);
}
else {
location = json['redirect'];
}
}
else if (json['error']) {
if (json['error']['warning']) {
$('#action-log').before('<div class="warning" style="display: none;">' + json['error']['warning'] + '</div>');
$('.warning').fadeIn('slow');
}
if (json['error']['error_login']) {
$('#action-log input[name=\'email\']').after('<span class="error">' + json['error']['error_login'] + '</span>');
}
if (json['error']['error_approved']) {
$('#action-log input[name=\'password\']').after('<span class="error">' + json['error']['error_approved'] + '</span>');
}}
}
});
// останавливаем сабмит, чтоб не перезагружалась страница
return false;
});
});

А это фрагмент php

protected function validate() {
$json = array();
if (!$this->customer->login($this->request->post['email'], $this->request->post['password'])) {
$json['error'] = $this->language->get('error_login');
}

$customer_info = $this->model_account_customer->getCustomerByEmail($this->request->post['email']);

if ($customer_info && !$customer_info['approved']) {
$json['error'] = $this->language->get('error_approved');
}


$this->response->setOutput(json_encode($json));
}

Как то так. Поля формы при неправильном вводе должны выдавать ошибку.

[RomAndry]

$json['error'] = $this->language->get('error_approved');
тут вы задаете одно, а
if (json['error']['error_login']) {
тут пытаетесь проверять другое

[ДмитрийТ]

Подскажите как правильно разобрать массив с ошибками json

[wouldnt_even]

я вижу только хэндлер на удачное выполнение. (success а для ошибки нужен error:

а вообще, что именно не так? и зачем сабмит заменять вызовом метода ajax?

[ДмитрийТ]

Чтобы страница не перезагружалась и можно было выполнить вход с любой страницы, так как ajax и форма расположены в header.

[PhoeniXX]

Разве после логина содержимое страницы не должно поменяться с учётом залогиненного пользователя?

[wouldnt_even]

Сообщение от ДмитрийТ

Чтобы страница не перезагружалась и можно было выполнить вход с любой страницы, так как ajax и форма расположены в header.

тогда не делайте кнопку сабмит. просто повесьте ивент хэнждер на кнопку по айди. доберусь домой напишу.

Почесав затылок, юзер дописал через 2 минуты

Сообщение от PhoeniXX

Разве после логина содержимое страницы не должно поменяться с учётом залогиненного пользователя?

иожно скриптом поменять только навбар. как например.

я так понял что делается логин форма в навбаре.

[ДмитрийТ]

Так точно! Форма расположена в топ навбаре. Нажав на ссылку вход, выпадает форма, а из формы данные отправляются через ajax в index.php?route=account/login, обрабатываются и отправляются в формате json обратно. Если succes-скрипт обновляет страницу страницу, если error он выделяет поля красным и выводит ошибку поля. Правда еще не придумал как redirect сделать, но это потом.

На розетке подобный пример и в comfy кажется тоже.

[wouldnt_even]

Сообщение от ДмитрийТ

Так точно! Форма расположена в топ навбаре. Нажав на ссылку вход, выпадает форма, а из формы данные отправляются через ajax в index.php?route=account/login, обрабатываются и отправляются в формате json обратно. Если succes-скрипт обновляет страницу страницу, если error он выделяет поля красным и выводит ошибку поля. Правда еще не придумал как redirect сделать, но это потом.

а почему боитесь фрэймворков? здесь уже затрагивали AngularJS. погуглите MEAN.JS, посмотрите, как там сделана авторизация (навбар там "из коробки" приделан) и много вопросов сразу отпадет.

с директивами ng-show и ng-hide, <div> блоки будут либо прятаться либо показываться, в зависимости от наличия в рутскопе переменной user.

<div ng-show="user"> <li>User is signed in </li> <li ng-href="/signout">Sign out</li></div>
<div ng-hide="user"> <li ng-href="/signin">Sign in</li> <li ng-href=""/signup>Register</li></div>

[ДмитрийТ]

Честно сказать я не силен в js поэтому и прошу направить на путь истинный.

[wouldnt_even]

Сообщение от ДмитрийТ

Честно сказать я не силен в js поэтому и прошу направить на путь истинный.

а я ж не знаю, какие у Вас цели. если Вам нужно разбираться и править уже написанные кем-то решения на РНР, то да, можете рыть дальше. если эксплуатировать свою фантазию и создавать новые продукты, то есть средства и поудобнее.

это все вкусовщина. уже рекомендовал в соседней ветке http://rutracker.org/forum/viewtopic.php?t=4946417

у меня хоть сервер и на рельсах, да и на яваскрипте не люблю писать (кофискрипт - наше все, оттого и рельсы), но много полезного почерпнул из MEAN.JS фрэймворка.

[TIGR]

вуднт тут человек магазин делает без ангуляра

[wouldnt_even]

Сообщение от TIGR

вуднт тут человек магазин делает без ангуляра

по-моему не делает, а чей-то переделывает. и я не уговариваю на энгулар, а намекаю, что с JS фрэймворками легче будет.

там вообще много странностей, типа почему абсолютеый путь для регистрации и/или логина используется. закинь такое на хероку или любой хост и уже работать не будет. понятно, что можно абсолютный, но зачем? я время от времени закидываю на хероку, исключительно чтобы убедиться, что в продакшене все хаработает.

может в том и есть популярность РНР, что все можно развернуть у себя на даче с Апаче2.

Почесав затылок, юзер дописал через 20 минут

Сообщение от TIGR

вуднт тут человек магазин делает без ангуляра

у меня была другая загадка, которую так и не решил. тест на логин не проходит, хотя все кажется верно написано:

FactoryGirl.define do
  factory :user do
    email { Faker::Internet.email }
    password { Faker::Internet.password(8) }
    password_confirmation { password }
    provider "email"

    factory :confirmed_user do
      confirmed_at Time.zone.now
    end
  end
end

хэлпер:

class LoginPage

  include Capybara::DSL

  def sign_in (email, password)
    fill_in "Email", with: email
    fill_in "Password", with: password 
    find("button", text: "Sign in").click
  end

end

и сам тест:

require 'spec_helper'

feature 'Authentication', js: true do 
  
  before do
    @user = FactoryGirl.create(:confirmed_user)
    visit ('/signin')
    @login_page = LoginPage.new
    @login_page.sign_in(@user.email, @user.password)
  end

  feature 'login' do
    scenario 'with valid data' do
      expect(page).to have_content('Sign out')
    end
  end

end

и при всем при этом имею ошибку Invalid credentials

что характерно, в продакшене все отлично работает и тесты на регистрацию нормально проходят. только логин фэйл.

пол дня бился, в итоге просто удилил этот спек, но в подсознании червячек засел.

Почесав затылок, юзер дописал через 10 минут
да, кстати, ДмитрийТ, когда постите код для посторонних заключайте его в тэги [ c o d e ] [/ c o d e] а то РНР и джаваскрипт и так не являются удобочтаемыми языками, а в когда структура пропадает, то вообще ад.

[wouldnt_even]

сегодня открыл для себя brunch. все вопросы сразу отпали. теперь рельсы - это прото API. а клиентская часть на кофискрипте + джэйд. то, что хотел.

[ДмитрийТ]

За последние годы столько разных плагинов, фреймворков и всякого разного появилось что за всем не угонишься. Если человек- программист и регулярно этим занимается, возможно он сумеет это все понять и разложить по полкам. Для меня учить эти все фреймворки которые каждые пол года меняются это темный лес.

[ДмитрийТ]

Админ! Можно закрывать тему.

[wouldnt_even]

Сообщение от wouldnt_even

сегодня открыл для себя brunch. все вопросы сразу отпали. теперь рельсы - это прото API. а клиентская часть на кофискрипте + джэйд. то, что хотел.

да, реально все очень быстро развивается. фрэймворки на ноде, конечно, очень продвинутыми выглядят, после РОР и джанго.

еше не так давно баловался с socket.io ну и невольно задался вопросом, зачем все тспользуют RESTFul pattern, если можно эти же данные по сокетам передавать, при чем в обоих направлениях, сразу же после этого натыкаюсь на Meteorjs. когда-то "рельсы" казались легким фрэймворком, на котором можно создать приложение без особых усилий... но метеор очень быстро перенял пальму первенства. Изоморфный фулл-стэк "из коробки". Просто жесть. Видимо искусственному разделению на фронт и бэк не долго осталось жить в вэб разработке.