Ajax与Json交互实例

来源：互联网发布：会计网络继续教育考试编辑：程序博客网时间：2024/06/07 16:29

1.用户验证：

前端将用户名传递给后台，后台通过查找如果法相用户名存在则打包json为{exist:true}不存在为{“exist”:false}

具体实现：

后台：

public void getJsonObj(HttpServletRequest request, HttpServletResponse response)
           throws ServletException, IOException {
       response.setContentType("text/html;charset=utf-8");
       PrintWriter out=response.getWriter();
       String userName=request.getParameter("userName");
       JSONObject jsonObject=new JSONObject();
       if("xd".equals(userName)){
           jsonObject.put("exist", true);
       }else{
           jsonObject.put("exist", false);
       }
       out.println(jsonObject);
       out.flush();
       out.close();
   }

前端：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
   function checkUserName(){
       var xmlHttp;
       var userName=document.getElementById("userName").value;
       if(window.XMLHttpRequest){
           xmlHttp=new XMLHttpRequest();
       }else{
           xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
       }
       xmlHttp.onreadystatechange=function(){
           if(xmlHttp.readyState==4 && xmlHttp.status==200){
               var dataObj=eval("("+xmlHttp.responseText+")");
               if(dataObj.exist){
                   document.getElementById("tip").innerHTML="<img src='no.png'/> 该用户名已经存在";
               }else{
                   document.getElementById("tip").innerHTML="<img src='ok.png'/> 该用户名可用";

               }
           }
       };
       xmlHttp.open("get", "getAjaxName?action=jsonObject&userName="+userName, true);
       xmlHttp.send();

        // xmlHttp.open("post", "getAjaxName", true);
        //xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        //xmlHttp.send("name=jack&age=11");
   }
</script>
</head>
<body>
<div style="text-align: center;">
   <table align="center" id="register" border="1px">
       <tr>
       <th>用户注册</th>
       </tr>
   <tr>
       <td>用户名：</td>
       <td><input type="text" id="userName" name="userName" onblur="checkUserName()"/>  <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>
</div>
</body>
</html>

2.实现二级联动：

这个实际上是完成选择了省可以直接加载相应的市：

具体代码：

后台：

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();
   }

前端：

0 0