Ajax&Json —— 交互实例

最新推荐文章于 2022-03-04 16:21:53 发布

Jxinyun1314

最新推荐文章于 2022-03-04 16:21:53 发布

阅读量124

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/Cocoomg/p/9900752.html

版权

1. 完成效果：

验证用户名是否已经存在
二级联动

2. 验证用户名

光标离开用户名输入框时，触发失去焦点事件（onblur）将输入的用户名取出来，ajax发送请求到后台去验证！返回到前台判断，显示提示信息！

private void checkUserName(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    PrintWriter out=response.getWriter();
    String userName=request.getParameter("userName");
    JSONObject resultJson=new JSONObject();
    if("jack".equals(userName)){
        resultJson.put("exist", true);
    }else{
        resultJson.put("exist", false);
    }
    out.println(resultJson);
    out.flush();
    out.close();
}

<script type="text/javascript">
    function checkUserName(){
        var userName=document.getElementById("userName").value;
        var xmlHttp;
        if(window.XMLHttpRequest){
            xmlHttp=new XMLHttpRequest();
        }else{
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlHttp.onreadystatechange=function(){
            if(xmlHttp.readyState==4 && xmlHttp.status==200){
                alert(xmlHttp.responseText);
                var dataObj=eval("("+xmlHttp.responseText+")");
                if(dataObj.exist){
                    document.getElementById("tip").innerHTML="<img src='no.png'/>&nbsp;该用户名已经存在";
                }else{
                    document.getElementById("tip").innerHTML="<img src='ok.png'/>&nbsp;该用户名可用";
                }
            }
        };
        xmlHttp.open("get", "getAjaxInfo?action=checkUserName&userName="+userName, true);        
        xmlHttp.send();
    }
</script>

<body>
<table>
    <tr>
        <th>用户注册</th>
    </tr>
    <tr>
        <td>用户名：</td>
        <td><input type="text" id="userName" name="userName" onblur="checkUserName()"/>&nbsp;&nbsp;<font id="tip"></font></td>
    </tr>
    <tr>
        <td>密码：</td>
        <td><input type="text" id="password" name="password"/></td>
    </tr>
    <tr>
        <td>确认密码：</td>
        <td><input type="text" id="password2" name="password2"/></td>
    </tr>
    <tr>
        <td><input type="submit" value="注册"/></td>
        <td><input type="button" value="重置"/></td>
    </tr>
</table>
</body>

3. 二级联动

选中湖北省之后，把湖北省对应的 id（value值）传到后台进行查找，把湖北省的市全都查找出来发送到前台，前台利用JS 操作 DOM，动态添加到市下面去。

private void ejld(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    PrintWriter out=response.getWriter();
    String shengId=request.getParameter("shengId");
    JSONObject resultJson=new JSONObject();
    JSONArray jsonArray=new JSONArray();
    JSONObject temp=null;
    switch(Integer.parseInt(shengId)){
        case 1:{
            temp=new JSONObject();temp.put("id", 1);temp.put("text", "武汉");jsonArray.add(temp);
            temp=new JSONObject();temp.put("id", 2);temp.put("text", "仙桃");jsonArray.add(temp);
            temp=new JSONObject();temp.put("id", 3);temp.put("text", "随州");jsonArray.add(temp);
            break;
        }
        case 2:{
            temp=new JSONObject();temp.put("id", 4);temp.put("text", "济南");jsonArray.add(temp);
            temp=new JSONObject();temp.put("id", 5);temp.put("text", "烟台");jsonArray.add(temp);
            temp=new JSONObject();temp.put("id", 6);temp.put("text", "蓬莱");jsonArray.add(temp);
            break;
        }
        case 3:{
            temp=new JSONObject();temp.put("id", 7);temp.put("text", "杭州");jsonArray.add(temp);
            temp=new JSONObject();temp.put("id", 8);temp.put("text", "宁波");jsonArray.add(temp);
            temp=new JSONObject();temp.put("id", 9);temp.put("text", "温州");jsonArray.add(temp);
            break;
        }
    }
    resultJson.put("rows", jsonArray);
    out.println(resultJson);
    out.flush();
    out.close();
}

<script type="text/javascript">
    function loadInfo(){
        var shengId=document.getElementById("sheng").value;
        shi.options.length=0;  // 删除所有市下拉框的选项
        var xmlHttp;
        if(window.XMLHttpRequest){
            xmlHttp=new XMLHttpRequest();
        }else{
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlHttp.onreadystatechange=function(){
            if(xmlHttp.readyState==4 && xmlHttp.status==200){
                alert(xmlHttp.responseText);
                var dataObj=eval("("+xmlHttp.responseText+")");
                for(var i=0;i<dataObj.rows.length;i++){
                    var o=dataObj.rows[i];
                    shi.options.add(new Option(o.text,o.id));
                }
            }
        };
        xmlHttp.open("get", "getAjaxInfo?action=ejld&shengId="+shengId, true); 
        xmlHttp.send();
    }
</script>

<body>
省：
<select id="sheng" onchange="loadInfo()">
    <option value="1">湖北省</option>
    <option value="2">山东省</option>
    <option value="3">浙江省</option>
</select>
&nbsp;&nbsp;
市
<select id="shi">
</select>
</body>

转载于:https://www.cnblogs.com/Cocoomg/p/9900752.html

Jxinyun1314

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax&Json —— 交互实例

1.完成效果：验证用户名是否已经存在二级联动2.验证用户名光标离开用户名输入框时，触发失去焦点事件（onblur）将输入的用户名取出来，ajax发送请求到后台去验证！返回到前台判断，显示提示信息！private void checkUserName(HttpServletRequest request, HttpServletResponse re...
复制链接

扫一扫