philip187326
2021-07-07 18:27
采纳率: 77.8%
浏览 78
已采纳

前辈们好,请问我这个ajax请求为什么不能触发?

这是我写在jsp文件中的脚本块,是把两个事件,前边这个doUserExist()方法里边就是ajax请求,但是一直无法触发

<script type="text/javascript">
            function doUserExist(){
                //使用ajax判断用户是否已存在
                var xmlHttp = new XMLHttpRequest();
                xmlHttp.onreadystatechange = function(){
                    if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                        document.getElementById("userExistError").innerHTML = xmlHttp.responseText;
                    }
                    var param = document.getElementById("phoneNumber").value;
                    xmlHttp.open("post", "ifUserExist?" + param, true);
                    xmlHttp.send();
                } 
            }
            //清空span
            function clrExistError(){
                document.getElementById("userExistError").innerHTML = "";
            }
</script>
<input type="text" id="phoneNumber" name="phoneNumber" placeholder="请输入手机号码" onfocus="clrExistError()" onblur="doUserExist()"><span id = "userExistError"><span>

下边是我的Controller方法:

@RequestMapping(value = "ifUserExist", method = RequestMethod.POST)
    public void ifUserExist(HttpServletResponse response, Long phoneNumber) throws IOException {
        System.out.println("接受了Ajax请求");
        if(phoneNumber.toString().length() == 11){
            PrintWriter out = response.getWriter();
            if((service.userExist(phoneNumber)) > 0){
                out.print("该用户已存在!请直接<a href = 'loginPage.jsp'>登录</a>");
                out.flush();
                out.close();
            }
        }
    }

但是就是无法触发onblur事件!!!请前辈们帮我看看我的代码写的是否有问题?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

6条回答 默认 最新

  • blkq 2021-07-07 19:00
    已采纳

    我刚本地调了一下,代码可以跑起来,你把地址改成你服务器的试试看:

    <script type="text/javascript">
    
              function doUserExist() {
    
                    //使用ajax判断用户是否已存在
    
                    var xmlHttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
    
                    var param = document.getElementById("phoneNumber").value;
    
                    xmlHttp.open("post", "http://www.baidu.com/ifUserExist?phoneNumber=" + param, true);
    
                    xmlHttp.onreadystatechange = function() {
                        alert("xmlHttp.status: " + xmlHttp.status + " xmlHttp.readyState: " + xmlHttp.readyState);
    
                        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
    
                            document.getElementById("userExistError").innerHTML = xmlHttp.responseText;
    
                        }
    
                    }
    
                    xmlHttp.send();
    
                }
    
                //清空span
    
                function clrExistError(){
    
                    document.getElementById("userExistError").innerHTML = "";
    
                }
    
    </script>
    
    <input type="text" id="phoneNumber" name="phoneNumber" placeholder="请输入手机号码" onfocus="clrExistError()" onblur="doUserExist()"><span id = "userExistError"><span>
    
    
    点赞 评论
  • 田田田田田什么昌 2021-07-07 19:09
                function doUserExist(){
                      //使用ajax判断用户是否已存在
                    var xmlHttp = new XMLHttpRequest();
                    xmlHttp.onreadystatechange = function(){
                        if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                            document.getElementById("userExistError").innerHTML = xmlHttp.responseText;
                        }
                    } 
                    xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                    var param = document.getElementById("phoneNumber").value;
                    xmlHttp.open("post", "ifUserExist", true);
                    xmlHttp.send("phoneNumber="+param);
                }
    

    你可以尝试这样写一下,如果还不可以的话 可能要看你项目架构是否正确了

    点赞 1 评论
  • 田田田田田什么昌 2021-07-07 18:39

    也许是因为你把open和send方法写到监听里边了。。

    点赞 评论
  • 404警告 2021-07-07 18:40
    <script type="text/javascript">
                function doUserExist() {
                    //使用ajax判断用户是否已存在
                    var xmlHttp = new XMLHttpRequest();
                    var param = document.getElementById("phoneNumber").value;
                    xmlHttp.open("post", "ifUserExist?" + param, true);
                    xmlHttp.onreadystatechange = function() {
                        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                            document.getElementById("userExistError").innerHTML = xmlHttp.responseText;
                        }
                    }
                    xmlHttp.send();
                }
                //清空span
                function clrExistError() {
                    document.getElementById("userExistError").innerHTML = "";
                }
            </script>
    
    
    点赞 评论
  • 憨憨哥 2021-07-07 18:42

    the server responds with 500 because some exceptions are raised during the ajax call. i guess its

    点赞 评论
  • philip187326 2021-07-07 19:06

    还是不行。。。没有请求发出

    点赞 评论

相关推荐 更多相似问题