关于ajax提交后无结果

package com.imooc.filter;

import com.alibaba.fastjson.JSON;

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;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@WebServlet(name = "MessageServlet",urlPatterns = "/message")
public class MessageServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //定义一个list存储message.jsp传来的表单信息
        List list=new ArrayList();
        String username=request.getParameter("username");
        String title=request.getParameter("title");
        String content=request.getParameter("content");
       Message message=new Message(username,title,content);
       list.add(message);
        //将list序列化
        String listString= JSON.toJSONString(list);
        System.out.println(listString);
        //将list写回
        response.setContentType("text/html;charset=utf-8");
        response.getWriter().println(listString);

    }
}

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019-02-09
  Time: 14:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="form.css" rel="stylesheet" type="text/css">
    <link href="table.css"  rel="stylesheet" type="text/css">
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<%
    String username=(String) session.getAttribute("username");
%>
<form class="smart-green">
    <h1>留言板</h1>
    <label>
        <span>留言人 :</span>
        <input id="user" type="text" name="user" value="<%=username%>" readonly/>
    </label>

    <label>
        <span>标题 :</span>
        <input id="title" type="text" name="title" />
    </label>

    <label>
        <span>内容 :</span>
        <textarea id="content" name="content"></textarea>
    </label>

    <span>&nbsp;</span>

    <label>
        <input type="submit" class="button" value="提交"/>
    </label>
</form>
<br/>
<table id="table-3" width="85%" align="center">
    <tr>
        <th width="15%">留言人</th>
        <th width="15%">标题</th>
        <th width="70%">内容</th>
    </tr>
</table>

<%--用ajax提交信息将填入的留言信息显示在table中--%>
<script>
    $("input[type=submit]").click(function () {
        //获取表单信息
        var username=$("input[name=user]").val();
        var title=$("input[name=title]").val();
        var content=$("textarea").val();
        $.ajax({
            "url":"/filterDemo/message",
            "type":"post",
            "data":{"username":username,"title":title,"content":content},
            "dataType":"json",
            "success": function (json) {
                console.log('3123123');
                <%--<%System.out.println("123");%>--%>

                for (var i=0;i<json.length;i++){
                $("#table-3").append("<tr>"+"<td width='15%'>"+json[i].username+"</td>"
                    +"<td width='15%'>"+json[i].title+"</td>"+
                    "<td width='70%'>"+json[i].content+"</td>"
                    +"</tr>");
            }
            },
            "error":function () {
                alert("留言失败");
            }
        })
    })

</script>


</body>
</html>

ajax提交后table下没有结果显示，好像是success不能执行，调试很多次不知道什么原因，抓包后有json数据就是不在table下显示，求老师解答

给大佬递茶 2019-02-09

源自：过滤器（老版） 3-12 多个dispatcher子元素的配置

收起

1回答

chrismorgen 回答被采纳获得+3积分 2019-02-11 14:06:46

建议同学在浏览器中按F12，看一下浏览器控制台中的报错提示是什么？如果有，建议你将报错提示粘贴上来，祝学习愉快~

收起回答

给大佬递茶提问者 #1

我把form换成div可以，感觉就是form和ajax冲突了，尽管我没设置form的action和method，控制台没有报错

2019-02-11 14:18:51
chrismorgen 回复提问者给大佬递茶 #2

你好同学，form表单和ajax同时提交是冲突的，即使没写action和method也会冲突，建议同学可以不使用form来包裹input标签哦，祝学习愉快~

2019-02-11 17:09:05