本次的操作将通过AJax读取服务器端的数据,数据将采用json格式保存,最终讲这些数据设置到下拉列表框中

定义Servlet

定义JSONServlet.java

package mao.shu.servlet;

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

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 java.io.IOException;
@WebServlet("/JSONServlet")
public class JSONServlet extends HttpServlet {
    @Override
    public void doGet(HttpServletRequest req, HttpServletResponse resp) throws  IOException {
      req.setCharacterEncoding("UTF-8");
      resp.setCharacterEncoding("UTF-8");
      //定义JSON对象
      JSONObject jsonObject = new JSONObject();
      jsonObject.put("name","Maoshu");
      jsonObject.put("age",22);
      jsonObject.put("sex","男");

      //保存两个部门信息的数组
      int [] deptno = new int[]{1,2};
      String[] dname = new String[]{"人事部","财务部"};

        JSONArray dept= new JSONArray();
        for (int x = 0; x < deptno.length; x++) {
            JSONObject temp = new JSONObject();
            temp.put("deptno",deptno[x]);
            temp.put("dname",dname[x]);
            dept.add(temp);
        }
        jsonObject.put("dept",dept);
        //将JSON数据输出到客户端中
        resp.getWriter().print(jsonObject);
    }

    @Override
    public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req, resp);
    }
}

运行结果,显示出乱码不要紧,因为已经设置了编码格式,再度取得时候是没有问题的

在这里插入图片描述

随后编写JavaScript文件进行内容提示,显示为下拉列表框
示例:使用AJax数据处理
定义页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Javascript_json</title>
</head>
<body>
    <div id="name">

    </div>
    <div id="age"></div>
    <div id="sex"></div>
    <div>
        <select name="dept" id="dept-title">

        </select>
    </div>
</body>
</html>

编写JavaScript代码

      //保存xmlrequest对象的变量
        var xmlhttprequest;
       window.onload = function () {
           loadInfo();
       };

       //创建XMLRequest对象,该对象可以操作Ajax异步处理
        function createxmlhttprequest(){
            //判断当前浏览器是否支持AJax处理
            if(window.XMLHttpRequest){
                xmlhttprequest = new XMLHttpRequest();
            }else if (window.ActiveXObject) {
                //如果不支持AJax操作则表示为ie6浏览器
                xmlhttprequest = new ActiveXObject("Microsoft.XMLHttp");
            }
        }
        function loadInfo(){
            createxmlhttprequest();
            xmlhttprequest.open("post","/JSONProject/JSONServlet");
            xmlhttprequest.send(null);
             xmlhttprequest.onreadystatechange = function() {
                //确保请求的结果有没有出问题
                if (xmlhttprequest.readyState == 4) {
                    if(xmlhttprequest.status == 200){
                        //接受回应的内容
                        var responseText = xmlhttprequest.responseText;
                        //将回应的内容解析为JSON对象
                        var jsonObj = eval("("+responseText+")");
                        var nameEle = document.getElementById("name");
                        var ageEle = document.getElementById("age");
                        var sexEle = document.getElementById("sex");
                        var deptEle = document.getElementById("dept");


                        nameEle.innerHTML = jsonObj.name;
                        ageEle.innerHTML = jsonObj.age;
                        sexEle.innerHTML = jsonObj.sex;
                        //得到JSON中的dept数组
                        var dept = jsonObj.dept;
                        for(var x = 0; x < dept.length;x++){
                            //取出dept中的每一个JSON对象
                            var temp = dept[x];
                            var optEle = document.createElement("option");
                            optEle.setAttribute("value",temp.deptno);
                            optEle.appendChild(document.createTextNode(temp.dname));
                            deptEle.appendChild(optEle);
                        }
                    }
                }
            };

        }

页面执行结果

在这里插入图片描述

综合实战-Ajax异步加载JSON数据

定义Servlet

猜你喜欢