Ajax结合Json进行交互数据(四)

<%@ 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">

    //json对象

    function loadInfo(){

        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+")");//得到的是json对象

                alert(dataObj.name);//因为是json对象，所以能点属性

                alert(dataObj.age);

                document.getElementById("name").value=dataObj.name;

                document.getElementById("age").value=dataObj.age;

            }

        };

        xmlHttp.open("get", "getAjaxInfo?action=jsonObject", true);

        xmlHttp.send();

    }

    //json数组

    function loadInfo2(){

        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+")");

                var st=document.getElementById("studentTable");

                alert(dataObj.students.length);

                var newTr; // 行

                var newTd0; // 第一列

                var newTd1; // 第二列

                var newTd2; // 第三列

                for(var i=0;i<dataObj.students.length;i++){

                    var student=dataObj.students[i];

                    newTr=st.insertRow();

                    newTd0=newTr.insertCell();

                    newTd1=newTr.insertCell();

                    newTd2=newTr.insertCell();

                    newTd0.innerHTML=student.name;

                    newTd1.innerHTML=student.age;

                    newTd2.innerHTML="语文:"+student.score.chinese+",数学:"+student.score.math+",英语:"+student.score.english;

                }

            }

        };

        // xmlHttp.open("get", "getAjaxInfo?action=jsonArray", true);

        xmlHttp.open("get", "getAjaxInfo?action=jsonNested", true);

        xmlHttp.send();

    }

</script>

</head>

<body>

<div style="text-align: center;">

    <div><input type="button" onclick="loadInfo()" value="Ajax获取信息"/>&nbsp;&nbsp;姓名：<input type="text" id="name" name="name" />&nbsp;&nbsp;年龄：<input type="text" id="age" name="age" /></div>

    <div style="margin-top: 20px;">

        <input type="button" onclick="loadInfo2()" value="Ajax获取信息2"><br/>

        <table id="studentTable" align="center" border="1px;" cellpadding="0px;">

            <tr>

                <th>姓名</th><th>年龄</th><th>得分</th>

            </tr>

        </table>

    </div>

</div>

</body>

</html>

package com.wp.servlet

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);

    }

    @Override

    protected void doPost(HttpServletRequest request,

            HttpServletResponse response) throws ServletException, IOException {

        response.setContentType("text/html;charset=utf-8");

        String action = request.getParameter("action");

        if ("jsonObject".equals(action)) {

            this.getJsonObject(request, response);

        } else if ("jsonArray".equals(action)) {

            this.getJsonArray(request, response);

        } else if ("jsonNested".equals(action)) {

            this.getJsonNested(request, response);

        }

    }

    /**

     * json对象

     *

     * @param request

     * @param response

     * @throws ServletException

     * @throws IOException

     */

    private void getJsonObject(HttpServletRequest request,

            HttpServletResponse response) throws ServletException, IOException {

        PrintWriter out = response.getWriter();

        // String resultJson="{\"name\":\"张三\",\"age\":22}";//斜杠在这里是转义

        JSONObject resultJson = new JSONObject();

        resultJson.put("name", "张三");

        resultJson.put("age", 22);

        out.println(resultJson);

        out.flush();

        out.close();

    }

    /**

     * 简单的json数组

     *

     * @param request

     * @param response

     * @throws ServletException

     * @throws IOException

     */

    private void getJsonArray(HttpServletRequest request,

            HttpServletResponse response) throws ServletException, IOException {

        PrintWriter out = response.getWriter();

        JSONObject resultJson = new JSONObject();

        JSONArray jsonArray = new JSONArray();

        JSONObject jsonObject1 = new JSONObject();

        jsonObject1.put("name", "张三");

        jsonObject1.put("age", 22);

        JSONObject jsonObject2 = new JSONObject();

        jsonObject2.put("name", "李四");

        jsonObject2.put("age", 23);

        JSONObject jsonObject3 = new JSONObject();

        jsonObject3.put("name", "王五");

        jsonObject3.put("age", 24);

        jsonArray.add(jsonObject1);

        jsonArray.add(jsonObject2);

        jsonArray.add(jsonObject3);

        resultJson.put("students", jsonArray);

        out.println(resultJson);

        out.flush();

        out.close();

    }

    /**

     * 多重json嵌套

     *

     * @param request

     * @param response

     * @throws ServletException

     * @throws IOException

     */

    private void getJsonNested(HttpServletRequest request,

            HttpServletResponse response) throws ServletException, IOException {

        PrintWriter out = response.getWriter();

        JSONObject resultJson = new JSONObject();// 创建最后结果的json

        JSONArray jsonArray = new JSONArray();// json数组

        JSONObject jsonObject1 = new JSONObject();// json对象

        jsonObject1.put("name", "张三");

        jsonObject1.put("age", 22);

        JSONObject scoreObject1 = new JSONObject();

        scoreObject1.put("chinese", 90);

        scoreObject1.put("math", 100);

        scoreObject1.put("english", 80);

        jsonObject1.put("score", scoreObject1);

        JSONObject jsonObject2 = new JSONObject();

        jsonObject2.put("name", "李四");

        jsonObject2.put("age", 23);

        JSONObject scoreObject2 = new JSONObject();

        scoreObject2.put("chinese", 70);

        scoreObject2.put("math", 90);

        scoreObject2.put("english", 90);

        jsonObject2.put("score", scoreObject2);

        JSONObject jsonObject3 = new JSONObject();

        jsonObject3.put("name", "王五");

        jsonObject3.put("age", 24);

        JSONObject scoreObject3 = new JSONObject();

        scoreObject3.put("chinese", 80);

        scoreObject3.put("math", 60);

        scoreObject3.put("english", 90);

        jsonObject3.put("score", scoreObject3);

        // {"score":{"chinese":80,"math":60,"english":90}}

        jsonArray.add(jsonObject1);

        jsonArray.add(jsonObject2);

        jsonArray.add(jsonObject3);

        // {"name":"王五","age":24,"score":{"chinese":80,"math":60,"english":90}}

        resultJson.put("students", jsonArray);// "students":[数组]

        // {"student":[{"name":"王五","age":24,"score":{"chinese":80,"math":60,"english":90}}]}

        out.println(resultJson);

        out.flush();

        out.close();

    }

}

ajax通过XMLHttpRequest的open和send方法进行请求，servlet端就是一个服务器端在接收请求后，通过response.getWriter()得到输出字符流，然后在html页面上通过XMLHttpRequest的responseText来得到响应的信息。

Java小生店铺：

Pc端：http://shop125970977.taobao.com/index.htm

手机端：搜索 java小生店铺

希望店铺的资料能帮助到你！！！

Ajax结合Json进行交互数据(四)的更多相关文章

Ajax获取 Json文件提取数据
摘自 Ajax获取 Json文件提取数据 1. json文件内容(item.json) [ { "name":"张国立", "sex":&q ...
Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面
一.JQuery+Ajax用get.post方式提交和请求数据知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...
通过Ajax post Json类型的数据到Controller
View function postSimpleData() { $.ajax({ type: "POST", url: "/Service/SimpleData&quo ...
jquery ajax提交json格式的数据，后台接收并显示各个属性
我的表单如下: <form onsubmit="return false"> <ul> <li><span>用户名</span ...
ajax请求json中的数据
在这里不多说,直接可以运行代码看效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta ...
如何使用ajax将json传入后台数据
首先采用jquery内部封装好的方法是比较简单的,我们只需做的就是修改里面的一些配置: 对$.ajax()的解析: $.ajax({ type: "POST", //提交方式 co ...
AJAX获取JSON形式的数据
test.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
把数据转化为JSON格式用ajax进行前后端交互
接着在https://www.cnblogs.com/dong973711/p/10907733.html的基础上做验证. 从前端提交数据前端页面,submit.html <!DOCTYPE ...
Django--多对多表的创建、contentType、ajax、ajax传输json数据格式、ajax传输文件数据、自定义分页器
MTV与MVC(了解): MTV模型(Django用的就是MTV): M:模型层(models.py) T:templates C:views MVC模型: M:模型层(models.py) V:视图 ...

随机推荐

reshape
reshape 编辑 reshape是一种函数,函数可以重新调整矩阵的行数.列数.维数.在matlab命令窗口中键入doc reshape或help reshape即可获得该函数的帮助信息. B = ...
codeforces740B
Alyona and flowers CodeForces - 740B Little Alyona is celebrating Happy Birthday! Her mother has an ...
Qt 获取屏幕信息
void GetScreenInfo() { QDesktopWidget* desktopWidget = QApplication::desktop(); //获取可用桌面大小 QRect des ...
Codeforces Round #437 Div. 1
A:显然构造一组只包含1和2面值的数据即可. #include<iostream> #include<cstdio> #include<cmath> #includ ...
Game HDU - 3657(最小割)
Game Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
Quartus prime16.0 组合逻辑always块中敏感向量表不全
前言组合逻辑always块中向量敏感表不全导致的警告. 流程 1.对于如下代码块: always @(nstate /*or master_din or master_dout_reg*/) beg ...
【XSY2691】中关村卢卡斯定理数位DP
题目描述在一个$k$维空间中,每个整点被黑白染色.对于一个坐标为$(x_1,x_2,\ldots,x_k)$的点,他的颜色我们通过如下方式计算: 如果存在一维坐标是$0$,则颜色是黑色. ...
git同步远程已删除的分支和删除本地多余的分支
使用 git branch -a 可以查看本地分支和远程分支情况但远程分支(红色部分)删除后,发现本地并没有同步过来. 一. 同步本地的远程分支查看本地分支和追踪情况: git remote sh ...
android startActivityForResult 使用实例
ActivityForResult.java public class ActivityForResult extends Activity { Button bn; EditText city; @ ...
iis express添加虚拟目录
在调试WEB时,还是使用IIS EXPRESS比较方便, 在IIS中,选择网站,右击,添加虚拟目录或者应用程序,就能添加虚拟目录了.. 在IIS EXPRESS中,添加虚拟目录如下 1.右击IIS E ...

Ajax结合Json进行交互数据(四)

Ajax结合Json进行交互数据(四)的更多相关文章

随机推荐

热门专题