Apprenez l'astuce return false_javascript dans jQuey-js tutoriel-php.cn

Apprenez l'astuce return false_javascript dans jQuey

WBOY

Libérer： 2016-05-16 15:24:59

original

1168 Les gens l'ont consulté

Quelle est la fonction de return false dans jQuey ?
Return false est utilisé dans de nombreuses instructions. Bien sûr, pour les développeurs qui la connaissent, ils connaissent les bases et la fonction de cette instruction. Bien sûr, ils savent également quand utiliser cette instruction. Cependant, les débutants ne la comprennent pas nécessairement. .C'est très clair.Présentons la fonction de l'instruction return false à travers un exemple.
La fonction de l'instruction return est généralement de renvoyer la valeur de la fonction, et non plus d'exécuter les instructions suivantes, mais de passer directement à l'endroit où la fonction est appelée. Une autre fonction importante est d'annuler l'apparition du comportement d'événement par défaut.
L'exemple de code est le suivant :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("a").click(function(){ 
  return false; 
}) 
}) 
</script> 
</head> 
<body> 
<div id="first"> 
<div id="second"> 
 <a id="third" href=<a href="http://www.jb51.net">http://www.jb51.net</a>>链接</a> 
</div> 
</div> 
</body> 
</html>

Copier après la connexion

Comme le montre le code ci-dessus, après avoir cliqué sur le lien, il ne passe pas à la page d'accueil http://www.jb51.net En effet, le retour false peut empêcher le navigateur par défaut. Un comportement tel que cliquer sur des liens hypertexte permet d'accéder à des pages Web, ce qui est le comportement par défaut du navigateur. Regardons un autre exemple de validation de formulaire :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
 $(":submit").click(function(){ 
  if($("#username").val()=="") 
  { 
   alert("用户名不能为空!"); 
   $("#username").focus(); 
   return false; 
  } 
  if($("#pw").val()=="") 
  { 
   alert("密码不能为空!"); 
   $("#pw").focus(); 
   return false; 
  } 
 }) 
}) 
</script> 
</head> 
<body> 
<form action="http://www.jb51.net" name="myform"> 
<ul> 
 <li>用户名:<input type="text" id="username" /></li> 
 <li>密码:<input type="password" id="pw" /></li> 
 <li><input type="submit" value="提交表单"></li> 
</ul> 
</form> 
</body> 
</html>

Copier après la connexion

Dans le code ci-dessus, une instruction return false est ajoutée à la fin de chaque instruction de jugement. Si le nom d'utilisateur ou le mot de passe est vide, une boîte de dialogue apparaîtra. S'il n'y a pas d'instruction return false, alors la boîte d'invite apparaîtra. apparaîtra, mais le formulaire sera toujours soumis, car cliquer pour soumettre le formulaire est le comportement d'événement par défaut consistant à cliquer sur le bouton Soumettre.

Alors pourquoi renvoyer false dans jquery ne fonctionne pas ?

J'ai écrit un code js de vérification de formulaire comme suit :

function CheckUserName(){
    var username = $("#username").val();
    $.get("b.php",{ name:username},
      function (data){
        if(data == 1){
          $("#warnning").html("<font color=#FF3300>Account is used.</font>");
          return false;  //为啥不管用捏？
        } else {
          $("#warnning").html("<font color=#00CC66>You can register.</font>");
          return true;  //为啥不管用捏？
        }
      }
    );
  }

Copier après la connexion

Raison : La logique n'est pas claire. Pour définir ajax pour qu'il soit synchrone, vous devez utiliser $.ajax $.get qui est asynchrone par défaut et n'est pas dans le cadre. fonction de rappel. Déclarez plutôt une variable dans la fonction CheckUserName pour accepter la valeur de retour de la fonction de rappel, puis CheckUserName renvoie cette valeur.
Code modifié :

　function CheckUserName(){
    var username = $("#username").val();
    var result=false;
    $.ajax({async:false//要设置为同步的，要不CheckUserName的返回值永远为false
        ,url:'b.php',data:{name:username}
        ,success:function(data){
        if(data == 1){
          $("#warnning").html("<font color=#FF3300>Account is used.</font>");
          result=false;
        } else {
          $("#warnning").html("<font color=#00CC66>You can register.</font>");
          result=true;
        }
    }});
    return result;//==========这里才是CheckUserName的返回值，回调函数返回值没有意义
  }

Copier après la connexion

OK ! Testez-le, pas de problème !

Quand utiliser return et quand utiliser return false en js/jquery ? C’est aussi là que tout le monde est confus.

Fondamentalement parlant, return est utilisé pour renvoyer le résultat d'une fonction. Si vous avez besoin d'une fonction pour exécuter le résultat, renvoyez le résultat dont vous avez besoin. Si vous n'avez pas besoin du résultat, ne retournez pas ; > Il existe des utilisations spéciales dans jq, telles que $().each(function(){return false;}); Si false n'est pas renvoyé, tous les éléments seront bouclés, et si false est renvoyé une fois, le parcours ultérieur ne sera pas effectué et la boucle sera sautée.

Ce qui précède est une étude détaillée du return false dans jQuey. J'espère que cela sera utile à l'étude de chacun.