Servlet、AJAX,JSON操作（一）

最新推荐文章于 2021-03-20 00:56:21 发布

cgl_dong

最新推荐文章于 2021-03-20 00:56:21 发布

阅读量116

点赞数

分类专栏： Java 前端

本文链接：https://blog.csdn.net/weixin_43688691/article/details/90492156

版权

Java 同时被 2 个专栏收录

92 篇文章 0 订阅

订阅专栏

前端

21 篇文章 0 订阅

订阅专栏

在html页面中使用AJAX传递数据到Servlet,使用JSON数据格式进行交互

Html

使用了jquery中的ajax操作方法中的$ajax和 $(obj).load方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#b").click(function () {
                $("#pp").html("<h1>你也好</h1>");
                $("#i").val("no");
                $("#p").load("/ServletAjax","get",function (resText,statusText) {
                   alert(resText)
                })
            })
            }
        );
        $(document).ready(function () {
            $("#bb").click(function () {
                $.ajax({
                    url:"/ServletAjax",
                    type:"post",
                    data:"username=jack",
                    dataType:"html",
                    success:function (data) {
                       $("#hh").html(data)
                    },
                    error:function () {
                        alert("失败了、、")
                    }
                })
            })
            }
        );
        $(document).ready(function () {
            $("#bbb").click(function () {
                $.ajax({
                    url:"/ServletAjax",
                    type:"post",
                    data:{"name":"Tom","age":18},
                    dataType:"json",
                    success:function (data) {
                        alert(data.name)
                    },
                    error:function () {
                        alert("失败了、、")
                    }
                })
            })
        })
    </script>
</head>
<body>
    <p id="pp">大家好！</p>
<button id="b"> Go</button>
<input id="i" value="yes">

<h2 id="p">load方法</h2>
<br>
<br>
<br>
<button id="bb">Go Go</button>
<h2 id="hh">收到数据。。。。。</h2>
<br>
<br>
<br>
<br>
<br>
    <button id="bbb">Go Go Go</button>
    <h2 id="hhh">Json数据呀</h2>
</body>
</html>

使用了Jquery的ajax方法，jQuery提供了一些简单的操作，大致有四种方法比较好用

$obj.load(url[,data] [,callback])

作用：远程加载数据并加载到 $obj 元素中
url:远程请求的地址
data:要传递的参数
callback:请求和响应完成之后的回调函数

function(resText, statusText){
    resText: 响应回来的文本;
    statusText: 响应回来的状态文本
}

$.ajax()

$.ajax({});
{}: 请求的相关参数;
1.url: 字符串，表示异步请求方式的地址;
2.type: 字符串，表示请求方式 get 或 post;
3.data: 传递到服务器的参数;
    可以是字符串： "uname=wang&age=30";
    可以是 json;
4.dataType: 字符串，表示服务器响应回来的数据的格式;
1.html 2.xml 3.text 4.script 5.json 6.jsonp: 跨域时使用;
5.async: 布尔类型，表示是否采用异步方式 true是异步
6.success: 回调函数，请求和响应成功后的操作
    function(data){} data 表示响应回来的数据
7.error: 回调函数，请求或响应失败时要回来执行的操作
8.beforeSend: 回调函数，发送ajax请求之前要执行的操作 
如果 return false 则表示终止发送请求

$obj.get(url[,data] [,callback], [, type])

$obj.post(url[,data] [,callback], [, type])

就是确定方式的$ajax方法
url:远程请求的地址
data:要传递的参数（可选）
callback:请求和响应完成之后的回调函数

function(resText){
    resText: 响应回来的文本;
}

type:响应回来的数据的数据类型
1.html：响应回来的文本当成 HTML 文本处理
2.text：响应回来的文本当成 text 文本处理
3.json：响应回来的文本当成 JSON 处理（转换成 js 对象）

实体类User

在服务器端使用的是Jackson这个库来转换json

public class User {
    private String name;
    private String age;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAge() {
        return age;
    }

    public void setAge(String age) {
        this.age = age;
    }
}

Servlet

这个Servlet的post和get方法都被使用了

import com.fasterxml.jackson.databind.ObjectMapper;

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("/ServletAjax")
public class ServletAjax extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        String name=request.getParameter("name");
        String age=request.getParameter("age");
        System.out.println("用户名："+name);
        System.out.println("年龄："+age);
        User user=new User();
        user.setName(name);
        user.setAge(age);
        ObjectMapper objectMapper=new ObjectMapper();
        String json=objectMapper.writeValueAsString(user);
        System.out.println(json);
        response.getWriter().write(json);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
        User user=new User();
        user.setName("Jam");
        user.setAge("21");
        ObjectMapper objectMapper=new ObjectMapper();
        String json=objectMapper.writeValueAsString(user);
        System.out.println(json);
        response.getWriter().write(json);
    }
}

cgl_dong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Servlet、AJAX,JSON操作（一）

在html页面中使用AJAX传递数据到Servlet,使用JSON数据格式进行交互Html使用了jquery中的ajax操作方法中的$ajax和 $(obj).load方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Aja...
复制链接

扫一扫