您的位置：首页 > Web前端 > JavaScript

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

2019-01-12 19:29 204 查看
  • 本次的操作将通过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);
}
}
}
};

}
  • 页面执行结果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航