使用Ajax和PHP进行表单验证 - 从PHP返回一个变量以在javascript函数中使用

问题描述：

I'm using Ajax via jQuery for the first time ever. I have an html input and when a user clicks it and types something and then the focus blurs, i'm using jquery to call a php script to validate the user's input.

I'm trying to figure out how to take the variable in PHP and compare it in jQuery. Please give me any advise

Right now when the focus blurs, both of the images are visible.

Thanks in advance!

The 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" />

The 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;
}

The 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");
}

});

and the 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));

?>

我第一次通过jQuery使用Ajax。我有一个HTML输入，当用户点击它并输入内容然后焦点模糊，我使用jquery调用php脚本来验证用户的输入。 p>

我正在试图弄清楚如何在PHP中获取变量并在jQuery中进行比较。请给我任何建议 p>

当焦点模糊时，两个图像都可见。 p>

提前致谢！ p> \ n

html： p>

 ＆lt; label for =“FirstName”＆gt;名字＆lt; / label＆gt; 
＆lt; input type =“text”名称 =“FirstName”title =“First Name Here”id =“firstName”/＆gt; 
＆lt; img class =“thumb”id =“up”src =“Images / thumbs_up_48.png”/＆gt; 
＆lt;  img class =“thumb”id =“down”src =“Images / thumbs_down_48.png”/＆gt; 
  code>  pre> 
 
  CSS  p> 
 
  
  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; 
} 
  code>   pre> 
 
  jquery： p> 
 
 
  $（document）.ready（function（）{
 //我使用jQuery尝试ajax \  n $（“＃firstName”）。change（function（）{
 sendValue（$（this）.val（））; 
 $（“img”）。removeClass（'thumb'）。addClass（'thumbV'  ）; 
}）; 
 
 
函数sendValue（  str）{
 $ .post（“ajax.php”，{sendValue：str}，
 function（data）{
 if（data.returnValue === true）{
 $（“＃up”）  .removeClass（'thumb'）。addClass（'thumbV'）; 
} 
 else {
 $（“＃down”）。removeClass（'thumb'）。addClass（'thumbNV'）; 
} \  n //$ ("#ajax").html(data.returnValue);
}，“json”）; 
} 
 
}）; 
  code>  pre> 
 \  n 和PHP： p> 
 
 
 ＆lt;？php 
 
 $ choice = false; 
 
if（isset（$ _ POST ['sendValue']）  ）{
 $ value = $ _POST ['sendValue']; 
 if（preg_match（'/ ^ [a-zA-Z] $ /'，$ value））{
 $ choice = true; 
}  
 
} 
 
echo json_encode（array（“returnValue”=＆gt; $ choice））; 
 
？＆gt; 
  code>  pre> 
  div>

答

I would keep what you have right now.

At this time, I cannot see if there is a better way, but what you have now looks fine.

答

There is one line that looks weird:

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

means that you remove the class thumb and add class thumbV to all tags, making them visible. Basically meaning that one of them has class="thumbNV thumbV" and the other has class="thumbV"

Unless you intend to use the classes for something else I recommend simply doing

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

and then simply use jQuery's $('#up').hide() and $('#down').show() methods.

使用Ajax和PHP进行表单验证 - 从PHP返回一个变量以在javascript函数中使用

相关推荐