JQuery 实现 Ajax_jqggaxy-CSDN博客

本文链接：https://blog.csdn.net/Dear_Mr/article/details/53014402

今天刚好写了“省市联动”的代码，其中也遇到了不少的问题，JQuery也由于最近不太使用，略微有些生疏，那么下面就分享一下我用JQuery实现的ajax部分（这里从后台传来的的是xm形式的）

首先就是简单的页面代码：

<div>
    <select id="pro" onchange="">
        <option value="">选择省份</option>
        <option value="陕西">陕西</option>
        <option value="山东">山东</option>
    </select>
    <select id="city">
        <option>选择城市</option>
    </select>
</div>

下面是ajax部分（在此之前需要引入JQuery包哦！）

<script type="text/javascript">
    $(document).ready(
        function(){
            $("#pro").change(function(){
                $.ajax({
                    type: "POST",
                    url: "ChangeServlet",
                    data: {pro : $("#pro").val()},  //传递参数
                    dataType: "XML",
                    async: true,
                    beforeSend: function(){

                    },
                    success: function(xml){
                        $("#city").get(0).options.length = 0;
                        alert($("city", xml).text());
                        $(xml).find("city").each(function(i){
                            $("#city").get(0).options.add(new Option($(this).text(), $(this).text()));
                        });
                    },
                    complete: function(){

                    },
                    error: function(){
                        alert("error");
                    }               
                });
            });

        }
    );

</script>

上述代码中解决了一下几个问题：
通过post方法向后台传递了一个json对象，这个是利用data完成的；然后就是在前台解析xml了，当然这里面也牵扯DOM操作，就是对于select标签的操作，当数据成功传到前台的时候，需要先将”id = city“的select的长度置为零，$(“#city”).get(0).options.length = 0;，然后找到xml中的city标签对每一个执行$(“#city”).get(0).options.add(new Option( $(this).text(),$ (this).text()));的操作为”id = city“的select添加**option标签，并初始化其中的内容。

后台的servlet代码如下：

package ajax;

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

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 ChangeServlet
 */
@WebServlet("/ChangeServlet")
public class ChangeServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/xml;charset=UTF-8");
        String province = request.getParameter("pro");
//      System.out.println(province);
        StringBuffer sbf = new StringBuffer("<?xml version=\"1.0\" encoding=\"utf-8\"?><province>");
        if("陕西".equals(province)){
            sbf.append("<city>西安</city><city>咸阳</city><city>宝鸡</city>");
        }else if("山东".equals(province)){
//          System.out.println(2143534536);
            sbf.append("<city>济南</city><city>青岛</city><city>烟台</city>");
        }
        sbf.append("</province>");
        PrintWriter out = response.getWriter();
        out.write(sbf.toString());
//      System.out.println(sbf.toString());
        out.close();
    }
}