java web笔记：jquery ajax提交form表单到servlet（servlet 接收body体数据）

最新推荐文章于 2022-04-20 20:06:51 发布

strcpy_s

最新推荐文章于 2022-04-20 20:06:51 发布

阅读量390

点赞数

分类专栏： java web初学笔记

本文链接：https://blog.csdn.net/strcpy_s/article/details/116454465

版权

java web初学笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

注意：<input type=”submit”> 改为<input type=”button”>

<html>
  <head>
    <title>$Title$</title>

    <style type="text/css">
      *{
        margin: 0;
        padding: 0;
      }
      .buttons{
        margin-left: 20px;
      }
    </style>

      <script src="javascript/jquery-3.6.0.js"></script>
  </head>
  <body>

  <div style="margin: 80px auto 0 500px">
    <script>
        $(function (){

            $("#submit").click(function (){
                var formJson = getFormJson();
                //alert($("#info table tr:eq(0) td").text()); //correct
                function getFormJson()
                {
                    var arry = $("#form").serializeArray();
                    var formJson = {};
                    for(var i=0; i<arry.length; ++i)
                        if(arry[i].name == "interests")
                        {
                            if( !formJson.hasOwnProperty("interests"))
                                formJson[arry[i].name] = [];
                            formJson[arry[i].name].push(arry[i].value);
                        }
                        else
                            formJson[arry[i].name] = arry[i].value;

                    return JSON.stringify(formJson);
                }

                $.ajax({
                    url:'acceptStudentServlet',
                    type:"post",
                    data:formJson,
                    dataType:'text',
                    success: function (data){
                        var jsonObj = JSON.parse(data);

                        $("#info").css("display", "block");

                        var old = $("#info table tr:eq(0) td").text();
                        $("#info table tr:eq(0) td").text(old + jsonObj.classes);

                        var old = $("#info table tr:eq(1) td").text();
                        $("#info table tr:eq(1) td").text(old + jsonObj.name);

                        var old = $("#info table tr:eq(2) td").text();
                        $("#info table tr:eq(2) td").text(old + jsonObj.password);

                        var old = $("#info table tr:eq(3) td").text();
                        $("#info table tr:eq(3) td").text(old + jsonObj.interests);

                        
                    },
                    error: function (message){
                        alert("fail");
                    }
                })
            })

        })
    </script>
    <form  id="form" method="post" onsubmit="false" action="acceptStudentServlet">
      请选择班级: <select name="classes">
                    <option value="193">193</option>
                    <option value="194">194</option>
                    <option value="195">195</option>
                </select><br>
      用户名: <input name="name" type="text"><br>
      密 码: <input name="password" type="password"><br>

      个人兴趣:<input type="checkbox" name="interests" value="唱歌">唱歌
              <input type="checkbox" name="interests" value="跳舞">跳舞
              <input type="checkbox" name="interests" value="阅读">阅读
              <input type="checkbox" name="interests" value="编程">编程
              <input type="checkbox" name="interests" value="旅游">旅游
      <div class="buttons">
      	<!-- 此处type是button！！！-->
        <input type="button" value="注册" id="submit">
        <input type="reset" value="重置">
      </div>

        <div id="info" style="display: none">
           <table border="1">
               <tr>
                   <td>班级：</td>
               </tr>

               <tr>
                   <td>用户名：</td>
               </tr>

               <tr>
                   <td>密码：</td>
               </tr>

               <tr>
                   <td>兴趣：</td>
               </tr>

           </table>

        </div>
    </form>

  </div>
  </body>
</html>

acceptStudentServlet：

package com.servlet;

import com.Bean.Student;
import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;

public class acceptStudentServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        ObjectMapper mapper = new ObjectMapper();

        BufferedReader reader = req.getReader();
        String readerStr = "";// 接收用户端传来的JSON字符串（body体里的数据）
        String line;
        while ((line = reader.readLine()) != null){
            readerStr = readerStr.concat(line);
        }

        System.out.println(readerStr);


        Student student = mapper.readValue(readerStr, Student.class);
        String json = mapper.writeValueAsString(student);
        resp.getWriter().print(json);

    }

    protected void jQueryAjax(HttpServlet req, HttpServletResponse resp) throws ServletException, IOException{

    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }
}