下面是详细讲解“JSP+jquery使用ajax方式调用json的实现方法”的完整攻略，包括过程和示例说明。

简介

在Web开发中，后端与前端通信交互的方式有很多种，其中一种较为常见的方式是使用JSON数据格式与前端进行交互。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式，具有易于读写、易于解析等特点。本文主要介绍了使用JSP和jquery的ajax方式调用JSON实现前后端数据交互的方法。

实现步骤

以下为实现步骤：

步骤一：编写后端代码

后端使用java语言编写，主要用于生成JSON格式的数据，以便前端调用。

在后端代码中，需要使用JSON数据格式化工具类对查询结果进行格式化，转化为json数据格式，将数据以json数据格式返回给前端页面。以下为示例代码：

import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
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 com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.serializer.SerializerFeature;

@WebServlet("/queryJson")
public class QueryJsonServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
    private static Map<String, String> dataMap = new HashMap<String, String>();

    static {
        dataMap.put("1", "张三");
        dataMap.put("2", "李四");
        dataMap.put("3", "王五");
        dataMap.put("4", "赵六");
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {
        // 获取前端传过来的参数
        String id = req.getParameter("id");

        List<Map<String, String>> resultList = new ArrayList<Map<String, String>>();
        Map<String, String> resultMap = new HashMap<String, String>();

        if (id != null && !id.equals("")) {
            resultMap.put("name", dataMap.get(id));
        } else {
            for (Map.Entry<String, String> entry : dataMap.entrySet()) {
                String key = entry.getKey().toString();
                resultMap.put("id", key);
                resultMap.put("name", entry.getValue().toString());
                resultList.add(resultMap);
                resultMap = new HashMap<String, String>();
            }
        }

        String jsonString = JSON.toJSONString(resultList,
                SerializerFeature.WriteMapNullValue,
                SerializerFeature.WriteNullStringAsEmpty,
                SerializerFeature.WriteNullNumberAsZero);

        resp.setContentType("text/html;charset=UTF-8");
        resp.getWriter().write(jsonString);
    }
}

步骤二：编写前端代码

前端使用Jquery实现ajax异步请求后台数据，并展示在页面上。以下为示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX调用JSON数据</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#btnQuery').click(function() {
        var id = $('#txtId').val();
        $.ajax({
            type : "POST",
            url : "queryJson",
            dataType : "json",
            data : {id:id},
            success : function(data, textStatus, xhr) {
                var html = '';
                if(id==''){
                    $.each(data,function(index,obj){
                        html+='<tr><td>'+obj.id+'</td><td>'+obj.name+'</td></tr>';
                    });
                } else {
                    html='<tr><td>'+id+'</td><td>'+data.name+'</td></tr>';
                }
                $('#dataList').html(html);
            },
            error : function(xhr, textStatus, errorThrown) {
                alert("请求出现错误！");
            }
        });
    });
});
</script>
</head>
<body>
    <h3>AJAX调用JSON数据</h3>
    <table>
        <tr>
            <td>ID：</td>
            <td><input type="text" id="txtId"/></td>
            <td><button id="btnQuery">查询</button></td>
        </tr>
    </table>
    <table id="dataList">
        <tr>
            <th>ID</th>
            <th>姓名</th>
        </tr>
    </table>
</body>
</html>

示例说明

这里提供两个使用ajax调用JSON数据的示例，一个示例查询全部数据，一个示例查询指定ID对应的数据。

示例一：查询全部数据

前端代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX调用JSON数据</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#btnQuery').click(function() {
        var id = $('#txtId').val();
        $.ajax({
            type : "POST",
            url : "queryJson",
            dataType : "json",
            data : {id:id},
            success : function(data, textStatus, xhr) {
                var html = '';
                if(id==''){
                    $.each(data,function(index,obj){
                        html+='<tr><td>'+obj.id+'</td><td>'+obj.name+'</td></tr>';
                    });
                }
                $('#dataList').html(html);
            },
            error : function(xhr, textStatus, errorThrown) {
                alert("请求出现错误！");
            }
        });
    });
});
</script>
</head>
<body>
    <h3>AJAX调用JSON数据</h3>
    <table>
        <tr>
            <td>ID：</td>
            <td><input type="text" id="txtId"/></td>
            <td><button id="btnQuery">查询</button></td>
        </tr>
    </table>
    <table id="dataList">
        <tr>
            <th>ID</th>
            <th>姓名</th>
        </tr>
    </table>
</body>
</html>

示例二：查询指定ID对应的数据

前端代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX调用JSON数据</title>
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#btnQuery').click(function() {
        var id = $('#txtId').val();
        $.ajax({
            type : "POST",
            url : "queryJson",
            dataType : "json",
            data : {id:id},
            success : function(data, textStatus, xhr) {
                var html = '';
                if(id==''){
                    $.each(data,function(index,obj){
                        html+='<tr><td>'+obj.id+'</td><td>'+obj.name+'</td></tr>';
                    });
                } else {
                    html='<tr><td>'+id+'</td><td>'+data.name+'</td></tr>';
                }
                $('#dataList').html(html);
            },
            error : function(xhr, textStatus, errorThrown) {
                alert("请求出现错误！");
            }
        });
    });
});
</script>
</head>
<body>
    <h3>AJAX调用JSON数据</h3>
    <table>
        <tr>
            <td>ID：</td>
            <td><input type="text" id="txtId"/></td>
            <td><button id="btnQuery">查询</button></td>
        </tr>
    </table>
    <table id="dataList">
        <tr>
            <th>ID</th>
            <th>姓名</th>
        </tr>
    </table>
</body>
</html>

结语

以上就是JSP+jquery使用ajax方式调用json的实现方法的详细攻略。在实际开发中，需要注意的是后台代码返回JSON数据格式需要满足前端代码的解析规则，如果JSON数据格式不符合规范，可能会导致前端无法正常获取数据。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JSP+jquery使用ajax方式调用json的实现方法 - Python技术站

JSP+jquery使用ajax方式调用json的实现方法

简介