Ajax&Json交互实例

前端之家收集整理的这篇文章主要介绍了Ajax&Json交互实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

共用的Servlet

GetAjaxInfoServlet.java

package com.ruanku.web;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

public class GetAjaxInfoServlet extends HttpServlet{

	
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest request,HttpServletResponse response)
			throws ServletException,IOException {
		this.doPost(request,response);
	}
	/**
	 * 判断使用哪种Servlet
	 */
	@Override
	protected void doPost(HttpServletRequest request,IOException {
		response.setContentType("text/html;charset=utf-8");
		String action=request.getParameter("action");
		if("checkUserName".equals(action)){
			this.checkUserName(request,response);
		}else if("ejld".equals(action)){
			this.ejld(request,response);
		}
		
	}
	
	/**
	 * 验证用户名
	 */
	private void checkUserName(HttpServletRequest request,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();
	}
	/*
	 * 二级联动
	 */
	private void ejld(HttpServletRequest request,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();
	}
	
}

配置的xml信息

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>AjaxJsonchap01</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  
  <servlet>
  <servlet-name>getAjaxInfoServlet</servlet-name>
  <servlet-class>com.ruanku.web.GetAjaxInfoServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>getAjaxInfoServlet</servlet-name>
  	<url-pattern>/getAjaxInfo</url-pattern>
  </servlet-mapping>
</web-app>


<1>判断登录名是否相同

checkUserName.jsp

@H_404_14@<%@ 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 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'/>该用户名已经存在"; }else{ document.getElementById("tip").innerHTML="<img src='ok.png'/>该用户名可用"; } } }; xmlHttp.open("get","getAjaxInfo?action=checkUserName&userName="+userName,true); xmlHttp.send(); } </script> </head> <body> <table> <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> </body> </html>
二级联动

ejld.jsp

@H_404_14@<%@ 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 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> </head> <body> 省: <select id="sheng" onchange="loadInfo()"> <option value="1">江苏省</option> <option value="2">山东省</option> <option value="3">浙江省</option> </select> 市 <select id="shi"> </select> </body> </html>

猜你在找的Ajax相关文章