Ajax与Json交互实例

xiaoxiao2025-08-12 14

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" οnblur="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(); }

前端：

转载请注明原文地址: https://ju.6miu.com/read-1301662.html

最新回复(0)