Springboot ajax异步交互中相关问题

来源：互联网发布：易语言软件自动更新编辑：程序博客网时间：2024/06/04 23:36

问题产生：

对于页面（如登录）提交的信息，不能用get方式，需要用post方式来将相关数组放入到请求体里。

但是因为使用的是Restful API,所以对于验证后，会直接返回json格式数据。（只有get方式才能返回视图，post返回不了，会报错）

所以应该是返回数据后，前台根据返回的数据展示，或是根据返回的状态码（服务端可以任意传一个）跳转到相应页面。

然后这里，前台的页面ajax请求，一定不能用 form表达的submit事件。就是一定不能用提交的方式，JQuery的ajaxForm方法也不可以，因为其底层还是submit事件，只要是submit它提交后就会跳转，然后服务端返回的是json数据，它就会跳转到显示json格式的页面。

这里要用按钮的事件，来发送一个ajax请求，用serialize()方法将form表达中的信息封装好，发送到服务端，然后根据服务端返回的数据弹出相应的提示。

前台页面：

<!DOCTYPE html><html><head><script src="webjars/jquery/3.1.1/jquery.min.js"></script><script src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script><script>    $(function(){        $('#liu').click(function(){//点击按钮提交alert("1");            //要提交的表单id为form1            $.ajax({                url:"loginPost",                data:$("#myForm").serialize(),                type:"post",                success:function(data){//ajax返回的数据alert(data.id+data.name);                }            });            alert("2");        });    });</script><link rel="stylesheet" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css" />  <meta charset="UTF-8"><title>Insert title here</title></head><body><h2>hello zhangyan</h2><!--<form id="myForm" onsubmit="mySubmit()" method="post">--><form id="myForm"  method="post" action="loginPost"><input type="text" value="用户名"/><input type="text"  name="username" id="username" value="zhangyan"/><input type="text" value="密码" /><input type="password" name="password"/><button type="button" class="btn-warning" id="liu">基本按钮</button></form><div class="container"><h2>Button</h2><p>.btn 类是按钮的基本样式:</p></div></body></html>

package com.ecnu.back.controller;import com.ecnu.model.HelloEntity;import org.springframework.stereotype.Controller;import org.springframework.ui.ModelMap;import org.springframework.web.bind.annotation.*;import javax.servlet.ServletException;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import java.io.IOException;@Controllerpublic class BackIndexController {@RequestMapping(value = "/index",method = RequestMethod.GET)public String index() {System.out.print("index");return "backindex.html";}@GetMapping(value = "/login")public String login() {return "backlogin.html";}@PostMapping(value = "/loginPost")@ResponseBodypublic HelloEntity loginPost(ModelMap modelMap, @RequestParam("username")String name, @RequestParam("password")String pswd) throws ServletException, IOException {HelloEntity helloEntity = new HelloEntity(2,"liuzhi");System.out.print( name);System.out.print(pswd);System.out.print("sucesss1");modelMap.addAttribute("hello",1);return  helloEntity;//return "backlogin.html";}}

代码地址为：https://github.com/liuzhi0716/SpringbootALL

里面还附加了一个ajax的别人的代码zip压缩的。

参考链接：http://bbs.csdn.net/topics/390651787?page=1

里面的四楼的答案。

别人代码的原文链接：http://blog.csdn.net/oppo5630/article/details/52093898

阅读全文

0 0