Ajax 发送数据到 Servlet


Ajax & Servlet

1. Ajax 发送数据

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.3.1.js"></script>
    <script>
        /*
            ajax发送数据的格式:
                $.ajax({
                   url: 发送数据的地址,
                   type: 请求的方式get|post
                   dataType: 服务器返回给ajax的数据格式, 一般是“json”,“text”
                   data: 发送的数据,发送数据两种格式
                        name1=value1&name2=value2&name3=value3  拼接字符串的方式
                        {"key1":值1,"key2":值2....}  官方推荐的方式
                   success:function(服务器发送给ajax的响应数据  data){  // 服务器响应回来调用的方法
                   }
                });
         */

        // 当页面加载完毕触发的方法
        $(function () {
            // 找到b1按钮,并且给注册点击事件
            $("#b1").click(function () {
                $.ajax({
                    url: "${pageContext.request.contextPath}/ajaxServlet",
                    type: "get",//请求方式
                    data: {"username": "adm", "password": "123"}, // 发送数据
                    dataType: "json", // 如果Servlet指定了MIME类型则不需要该参数
                    success: function (data) {// data是Servlet写出来的数据
                        $("#username").val(data.username); // 给表单项设置数据
                        $("#password").val(data.password);
                    }
                });
            });

            $("#b2").click(function () {
                // 修改img标签的src属性
                $("#img1").prop("src", "images/3.png"); // prop方法的作用:设置标签元素的属性
                // 修改img标签的title属性
                $("#img1").prop("title", "这个500");
            });

        });
    </script>
</head>
<body>
<input type="button" id="b1" value="点击发送数据"/><br/>
<input type="button" id="b2" value="设置img标签的src属性"/><br/>
<img width="100px" height="100px" id="img1"/>
用户名:<input type="text" id="username"/><br/>
密码:<input type="text" id="password"/><br/>
</body>
</html>

2. Servlet 接收

package com.regino.travel.web.servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.regino.travel.domain.User;

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("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println("接收到的用户名" + username + " 密码:" + password);

        User user = new User(username, password);
        //把user转换为Json发送回去
        String json = new ObjectMapper().writeValueAsString(user);
        response.getWriter().write(json);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }
}
  • 实体类:
package com.regino.travel.web.servlet;

public class User {
    private String username;
    private String password;

    public User(String username, String password) {
        this.username = username;
        this.password = password;
    }
}

3. 效果展示


原文链接:https://qwert.blog.csdn.net/article/details/106249757

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试
应支付0元
点击重新获取
扫码支付

支付成功即可阅读