Проверка формы с помощью Ajax и PHP - возвращает переменную из PHP для использования в функции javascript

Question

Я впервые использую Ajax через jQuery. У меня есть ввод html, и когда пользователь щелкает его и что-то печатает, а затем фокус размывается, я использую jquery для вызова php-скрипта для проверки ввода пользователя.

Я пытаюсь понять, как взять переменную в PHP и сравнить ее в jQuery. Пожалуйста, дайте мне любой совет

Прямо сейчас, когда фокус размывается, оба изображения видны.

Заранее спасибо!

HTML:

<label for="FirstName">First Name</label>
     <input type="text" name="FirstName" title="First Name Here" id="firstName" />
     <img class="thumb" id="up" src="Images/thumbs_up_48.png" />
     <img class="thumb" id="down" src="Images/thumbs_down_48.png" />

CSS

img.thumb {
 visibility:hidden;
 height:0;
 width:0;
}
img.thumbV {
 visibility:visible;
 height:20px;
 width:20px;
 float:right;
}img.thumbNV {
 visibility:visible;
 height:20px;
 width:20px;
 float:right;
}

JQuery:

$(document).ready(function() {
 //my attempt at ajax using jQuery
 $("#firstName").change(function() {
  sendValue($(this).val());
  $("img").removeClass('thumb').addClass('thumbV');
 });


 function sendValue(str) {
 $.post("ajax.php", {sendValue: str}, 
 function(data) {
  if(data.returnValue === true) {
   $("#up").removeClass('thumb').addClass('thumbV');
  }
  else {
   $("#down").removeClass('thumb').addClass('thumbNV');
  }
  //$("#ajax").html(data.returnValue);
 }, "json");
}

});

и PHP:

<?php 

$choice = false;

if(isset($_POST['sendValue'])) {
 $value = $_POST['sendValue'];
 if(preg_match('/^[a-zA-Z]$/', $value)) {
  $choice = true;
 }

}

echo json_encode(array("returnValue"=>$choice));

?>

Answer 1

Я бы сохранила то, что у тебя есть сейчас.

В настоящее время я не могу понять, есть ли лучший способ, но то, что у вас есть сейчас, выглядит хорошо.

Answer 2

Одна строка выглядит странно:

$("img").removeClass('thumb').addClass('thumbV');

означает, что вы удаляете класс thumb и добавляете класс thumbV ко всем тегам, делая их видимыми. В основном это означает, что один из них имеет class="thumbNV thumbV", а другой имеет class="thumbV"

Если вы не собираетесь использовать классы для чего-то другого, я рекомендую просто сделать

img.thumb { display: none; height:20px; width:20px; }

, а затем просто используйте методы jQuery $('#up').hide() и $('#down').show().