Learn the return false_javascript skills in Jquey

Source: Internet
Author: User

What is the return false effect in Jquey?
In many of the statements have the use of return false, of course, for the developers familiar with it, of course, know the role of this statement, of course, know when to use this statement, but for beginners may not grasp the very clear, the following through the example to introduce the return The function of the false statement.
The return statement usually returns the function value, and no longer executes the following statement, skipping directly to the function call, and another important function is to cancel the occurrence of the default event behavior.
The code example is as follows:

<! DOCTYPE html>
 
 

From the above code can be seen, click on the link did not jump to the Http://www.jb51.net home page, this is because the return false can prevent the browser's default behavior, such as clicking on hyperlinks will achieve a Web page jump is the default behavior of the browser. Let's look at an example of a form validation:

 <! DOCTYPE html>  
 

In the code above, the return false statement is added at the end of each decision statement, and if the username or password is empty, the prompt box pops up, and if there is no return false statement, the form will still be submitted, even though the prompt box can be popped. Because clicking the Submit form is the default event behavior of clicking the Submit button.

So why is the return false in jquery not working, and what is the workaround?

Write a form to verify the JS code as follows:

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;  Why don't you pinch it?
        else {
          $ ("#warnning"). HTML ("<font color= #00CC66 >you can register.</font>");
          return true;  Why don't you pinch it?
        }
      }
    );
  }

Reason: logic is not clear, to set Ajax to sync, you need to use $.ajax,$.get default is asynchronous, and not in the callback function return, but in the Checkusername function to declare a variable to accept the callback function returned value , and then Checkusername returns this value.
Modified code:

function Checkusername () {
    var username = $ ("#username"). Val ();
    var Result=false;
    $.ajax ({async:false//to be set to sync, or checkusername return value is always 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;//========== Here is the Checkusername returned value, the callback function return value is meaningless
  }

Ok! Test it, no problem!

When to use return in Js/jquery, when to return false? This is also the place where everyone doubts.

Basically, return is the result of a function, and if you have a function that needs to perform the result, you need the result, and you don't need the result.
There are special uses in JQ, such as $ (). each (function () {return false;}) ;
If you do not return false, all elements are cycled, and if you return false one at a time, it is not a subsequent traversal, out of the loop.

The above is for Jquey in the detailed study of return false, I hope to help you learn.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.