Ajax实例-地域查询匹配

来源：互联网发布：犀牛社淘宝论坛编辑：程序博客网时间：2024/05/16 07:06

两个servlet两个jsp！

GetAreaAction

package ajax;import java.io.IOException;import java.util.List;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.catalina.User;import com.alibaba.fastjson.JSONObject;/** * Servlet implementation class GetCityAction */@WebServlet("/GetAreaAction")public class GetAreaAction extends HttpServlet {    private static final long serialVersionUID = 1L;    /**     * @see HttpServlet#HttpServlet()     */    public GetAreaAction() {        super();        // TODO Auto-generated constructor stub    }    /**     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)     */    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        request.setCharacterEncoding("utf-8");        response.setCharacterEncoding("utf-8");        response.setContentType("application/json");        String citycode = request.getParameter("citycode");        System.out.println(citycode);        if("gz".equals(citycode)){            String arealist = "[{\"code\":\"th\",\"name\":\"天河\"},{\"code\":\"hz\",\"name\":\"海珠\"}]";            response.getWriter().write(arealist);        }else{            String arealist = "[{\"code\":\"nh\",\"name\":\"南海\"},{\"code\":\"sd\",\"name\":\"顺德\"}]";            response.getWriter().write(arealist);        }    }    /**     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)     */    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        /*//json字符串转换成java对象        JSONObject.parseObject("json字符串",User.class);        //java对象转换成json字符串        String jsonstr= JSONObject.toJSONString(List<City> list);*/        String str[]={"","",""};        doGet(request, response);    }}

GetCityAction

package ajax;import java.io.IOException;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/** * Servlet implementation class GetCityAction */@WebServlet("/GetCityAction")public class GetCityAction extends HttpServlet {    private static final long serialVersionUID = 1L;    /**     * @see HttpServlet#HttpServlet()     */    public GetCityAction() {        super();        // TODO Auto-generated constructor stub    }    /**     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)     */    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        request.setCharacterEncoding("utf-8");        response.setCharacterEncoding("utf-8");        response.setContentType("application/json");        String citycode = request.getParameter("citycode");        System.out.println(citycode);        String citylist = "[{\"code\":\"gz\",\"name\":\"广州\"},{\"code\":\"sz\",\"name\":\"深圳\"}]";        response.getWriter().write(citylist);    }    /**     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)     */    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        // TODO Auto-generated method stub        doGet(request, response);    }}

city.jsp

<%@ 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>地址选择</title></head><body>城市<select id ="city"></select>区域<select id ="area"></select><script type="text/javascript" src="js/jquery.min.js"> </script></body><script type="text/javascript">$(document).ready(function () {    getcity();    $("#city").change(function () {        getarea($(this).val());        //alert("test");    });    function getcity(){        $.ajax(        {            type:"get",            url:"GetCityAction",            data:{"citycode":"gz"},            success: function (data) {                console.log(data);                $("#city").empty();                $.each(data,function(n,item){                    var option=$("<option></option>");                    option.val(item.code);                    option.text(item.name);                    option.appendTo($("#city"));                });                getarea($("#city").val());            }        }        );    }    function getarea(citycode){        $.getJSON("GetAreaAction",                {"citycode":citycode},function (data){            console.log(data);            $("#area").empty();            $.each(data,function(n,item){                var option=$("<option></option>");                option.val(item.code);                option.text(item.name);                option.appendTo($("#area"));            });        });    }    /* function getarea(citycode){        $.ajax(                {                    async:false,//默认为true，异步请求                    dataType:"json",                    type:"get",                    url:"GetAreaAction",                    data:{"citycode":citycode},                    success: function (data) {                        console.log(data);                        $("#area").empty();                        $.each(data,function(n,item){                            var option=$("<option></option>");                            option.val(item.code);                            option.text(item.name);                            option.appendTo($("#area"));                        });                    }                }        );    }*/});</script></html>

area.jsp

<%@ 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>地址选择</title></head><body><select id ="city"></select><script type="text/javascript" src="js/jquery.min.js"> </script></body><script type="text/javascript">$(document).ready(function(){    getcity();     function getcity(){        $.ajax(                {                    type:"get",                    url:"GetCityAction",                    data:{"citycode":"gz"},                    success:function(data){                        $("#city").empty();                        $.each(data,function (n,item) {                            var option=$("<option></option>")                            option.val(item.code)                             option.text(item.name);                             option.appendTo($("#city"))                        })                /*         var option=$("<option></option>") */                    }                }        );    }})</script></html>

0 0