jQuery Ajax进行前后台交互时总是返回到error函数

最新推荐文章于 2021-08-05 18:03:05 发布

bin929

最新推荐文章于 2021-08-05 18:03:05 发布

阅读量916

点赞数

分类专栏： ajax 文章标签： ajax jQuery

本文链接：https://blog.csdn.net/bin929/article/details/79909134

版权

ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天在做一个留言系统时，为让留言不用刷新页面显示，使用了ajax前后台交互，结果返回时总是在error函数中

原因：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>创建留言</title>
<script type="text/javascript" src="../js/jQuery/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
   function saveMessage(){
       var content = $("textarea").val();
       $.ajax({
           dataType:"json",
           type:"POST",
           url:"saveMessage.action",
           data:{content:content},
           success:function(data){
               if(data.config){
                   $('#message').append(content);
               }
           },error:function(data){
               alert(data);
           }
       });
   }

</script>
</head>
<body>
<center>
用户${user.uphone}你好
<br/>
如有问题请给我们留言，我们将在这里进行回复
<hr/>

<div>

       <form method="post">
           <table>
               <tr><td><textarea rows="3" cols="60" name="content" ></textarea></td></tr>
               <tr><td><button name="submit" οnclick="saveMessage()">留言</button></td></tr>
           </table>
        </form>
   </div>

   <div>
       <div id="message" color="blue" width="18px"></div>
       <hr/>

       <c:forEach items="${messages }" var="message">
           <font color="red">${message.content }</font><br/>
       </c:forEach>

   </div>
</center>
</body>

</html>

原来的前台源码如上，

    @RequestMapping(value="/saveMessage")
   @ResponseBody
   private Map<String, Object> saveMessage(Message message,HttpSession httpSession){

       //将登陆的用户信息取出放进message表内，将留言信息与用户相互关联
       User user = (User)httpSession.getAttribute("user");
       message.setUser(user);
       boolean config=messageService.saveMessage(message);
       Map<String, Object> map = new HashMap<String, Object>();
       map.put("config",config);
       return map;
   }

这是后台接收的方法

原因是前台使用了<form>表单，修改后前台代码如下：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>创建留言</title>

<script type="text/javascript" src="../js/jQuery/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
   function saveMessage(){
       var content = $("textarea").val();
       $.ajax({
           dataType:"json",
           type:"POST",
           url:"saveMessage.action",
           data:{content:content},
           success:function(data){
               if(data.config){

                   $('#message').append(content);
               }
           },error:function(data){
               alert(data);
           }
       });
   }

</script>

</head>
<body>
<center>

用户${user.uphone}你好
<br/>
如有问题请给我们留言，我们将在这里进行回复
<hr/>

<div>

           <table>
               <tr><td><textarea rows="3" cols="60" name="content" ></textarea></td></tr>
               <tr><td><button name="submit" οnclick="saveMessage()">留言</button>
               </td></tr>
           </table>

   </div>

   <div>
       <div id="message" color="blue" width="18px"></div>
       <hr/>

       <c:forEach items="${messages }" var="message">
           <font color="red">${message.content }</font><br/>
       </c:forEach>

   </div>
</center>
</body>

</html>

只是将<form>表单给去掉了，然后就解决了

在实现ajax刷新页面时，用<form>表单会实现一次跳转，而在同页面显示时不需要跳转，拥有<form>表单时一般用于登陆验证。

可能还有其他原因，欢迎大家指正，共同进步

bin929

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery Ajax进行前后台交互时总是返回到error函数

今天在做一个留言系统时，为让留言不用刷新页面显示，使用了ajax前后台交互，结果返回时总是在error函数中原因：&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;&lt;title&gt;创建留言&lt;/title&gt;&lt;scr
复制链接

扫一扫

专栏目录