黑马程序员技术交流社区

标题: ajax问题 [打印本页]
作者: 佟亚鹏    时间: 2012-9-15 17:15
标题: ajax问题
本帖最后由 佟亚鹏 于 2012-9-16 18:35 编辑

我在学习ajax，写一个用户名校验的例子，当用户提交注册信息时，不刷新页面，异步的检查用户名是否存在，根据是否存在的结果，在页面上提示用户相应信息。遇到了一个问题，输入一个存在的用户名，页面提示的也是“可以使用的用户名 ”，怎么弄都不行，不知道错在哪，头快炸了
这是我的Javascript代码
  1. function checkUsername {
  2.         var username = $("#username").val();
  3.         boolean exist =
  4. usernameIfExist (username);
  5.         if (exist == true)
  6.         {               
  7.                 usernameMSGObj.html("<font color='red'>这个用户名已经被注册，请重新输入</font>");
  8.         } else
  9.         {
  10.                 usernameMSGObj.html("<font color='red'>可以使用的用户名</font>");
  11.         }
  12. }

  14. function usernameIfExist(username)
  15. {
  16.   boolean exist = false;
  17.   $.get("checkUsernameServlet?username,null,function(data) {
  18.             if (data == true)
  19.             {               
  20.                 exist = true;
  21.             }
  22.         })
  23.   return sxist;
  24. }
复制代码
servlet实现的很简单，如果传过来的是typ0520，返回true  其它的都返回false，确定问题不是出现在servlet中。。。。。。高手帮看下


作者: 舒远    时间: 2012-9-15 18:01
usernameIfExist方法返回的永远是false，因为$.get是异步，在ajax请求还没有响应之前，usernameIfExist方法已经返回了，所以永远是false。
所以提示信息的代码应该在在$.get的回调函数中写。而不是拿到外面来！

我改写了一下：
  1. function checkUsername {
  2.         var username = $("#username").val();
  3.         usernameIfExist(username);
  4. }
  5. function usernameIfExist(username) {
  6.         $.get("checkUsernameServlet?username=" + username,null,function(data) {
  7.         if (data == true){               
  8.                         usernameMSGObj.html("<font color='red'>这个用户名已经被注册，请重新输入</font>");
  9.                 }
  10.                 else{
  11.                         usernameMSGObj.html("<font color='red'>可以使用的用户名</font>");
  12.                 }
  13.     });
  14. }
复制代码
作者: 谭立文    时间: 2012-9-15 18:04
本帖最后由 谭立文 于 2012-9-15 18:06 编辑

        <script src="../js/jQuery/jquery-1.8.0.js" language="JavaScript"></script>
        <script language="JavaScript">
                $().ready(function()
                {
                        $("#button").click(function()
                        {
                                  var username = $("#username").val();
                                  var exist = usernameIfExist(username);      //一般来说在javascript只有var型的变量    这个错误很坑爹啊                              if(exist)
                                  {
                                          alert("a");               
                              }
                                   else
                              {
                                          alert("b");               
                              }
                        });
                });
                function usernameIfExist(username)
                {
                        $.get("../CheckUsernameServlet?username=" + username,null,function(data,staus,xmlHttpRequest)  //表掉了 将username的信息传递给后台 否则你在后台取出来的始终为空
                        {
                                alert(data + " " +staus);
                        });
                }
        </script>
//注意你的html页面或jsp页面是否在某个文件夹下，多层目录要退回到根目录(WEB-ROOT)下 找你的Servlet否则无法与服务建立连接
作者: 佟亚鹏    时间: 2012-9-15 18:17
舒远 发表于 2012-9-15 18:01
usernameIfExist方法返回的永远是false，因为$.get是异步，在ajax请求还没有响应之前，usernameIfExist方法 ...

非常感谢，现在可以了，你的意思是，exist = true，这句代码还没执行，方法就返回了，相当于是不同的线程在执行 ，回调函数和usernameIfExist，可以这样理解吗
作者: 舒远    时间: 2012-9-15 19:04
佟亚鹏 发表于 2012-9-15 18:17
非常感谢，现在可以了，你的意思是，exist = true，这句代码还没执行，方法就返回了，相当于是不同的线程 ...

主方法是usernameIfExist，异步方法是$.get()
在主方法中执行完$.get()方法后就接着执行return语句了。不会说等待$.get()的回调函数执行完再回到return语句上。
不知道这么说你能理解么？
作者: 佟亚鹏    时间: 2012-9-15 19:07
舒远 发表于 2012-9-15 19:04
主方法是usernameIfExist，异步方法是$.get()
在主方法中执行完$.get()方法后就接着执行return语句了。不 ...

嗯，明白怎么回事了，下面的js继续执行，等数据回来才执行回调函数，
作者: 舒远    时间: 2012-9-15 19:24
佟亚鹏 发表于 2012-9-15 19:07
嗯，明白怎么回事了，下面的js继续执行，等数据回来才执行回调函数，

你总结的很精辟，就是这么回事。所以对画面上的DOM操作，也就是消息提示应该放在回调函数中写。才符合代码执行的顺序和业务逻辑。



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2