springboot ajax 返回 json 弹新页面

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 2870 天前的主题，其中的信息可能已经有所发展或是发生改变。

返回完结果就是这个样子，不走 ajax 后续的判断

来看看代码吧

java 代码 import com.bhusk.black.model.CompanyInfo; import com.bhusk.black.model.StatusBean; import com.google.code.kaptcha.impl.DefaultKaptcha; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.bind.annotation.RestController; import org.springframework.web.servlet.ModelAndView; import javax.imageio.ImageIO; import javax.servlet.ServletOutputStream; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.awt.image.BufferedImage; import java.io.ByteArrayOutputStream; @Controller @RequestMapping("/api") public class ApiVerification { /** * * * @param request * @param response * @param companyInfo 传递的公司信息 * @return */ @RequestMapping(value = "/putCompany", method = RequestMethod.POST) @ResponseBody public StatusBean apiPutInfo(HttpServletRequest request, HttpServletResponse response, CompanyInfo companyInfo) { StatusBean<String> statusBean = new StatusBean<String>(); String captchaId = (String) request.getSession().getAttribute("vrifyCode"); String parameter = request.getParameter("vrifyCode"); System.out.println("Session vrifyCode "+captchaId+" form vrifyCode "+parameter); if (!captchaId.equals(parameter)) { statusBean.setMessage("错误的验证码"); statusBean.setStatus(false); return statusBean; } else { statusBean.setMessage("成功"); statusBean.setStatus(true); } /** * api 接口保存 post 的数据信息 */ System.out.println("保存成功"); return statusBean; } }

html 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>申请收录</title> <meta http-equiv="Content-Type" cOntent="text/html; charset="/> <meta name="fragment" cOntent="!"> <link rel="icon" type="image/x-icon" href="${request.contextPath}/static/favicon.ico"> <link href="${request.contextPath}/static/css/demo.css" rel="stylesheet" type="text/css"> <!--Framework--> <script src="${request.contextPath}/static/js/jquery-1.9.1.js" type="text/Javascript"></script> <script src="${request.contextPath}/static/js/jquery-ui.js" type="text/Javascript"></script> <!--End Framework--> <script src="${request.contextPath}/static/js/jquery.ffform.js" type="text/Javascript"></script> <script type="text/Javascript"> $(document).ready(function () { $('#form').ffform({ animation: 'flip', submitButton: '#submit', validationIndicator: '#validation', errorIndicator: '#error', successIndicator: '#success', 'fields': [{ 'id': 'name', required: true, requiredMsg: 'Name is required', type: 'alpha', validate: true, msg: 'Invalid Name' }, { 'id': 'email', required: true, requiredMsg: 'E-Mail is required', type: 'email', validate: true, msg: 'Invalid E-Mail Address' }, { 'id': 'phone', required: false, type: 'custom', validate: false, msg: 'Invalid Phone #' }, {'id': 'message', required: false, type: 'text', validate: false, msg: ''}] }); }); </script> </head> <body> <section id="getintouch"> <div class="container" style="border-bottom: 0;"> <h1> <span> IT'S FREE!</span> </h1> </div> <div class="container"> <form class="contact" action="${request.contextPath}/api/putCompany" method="post" id="form"> <div class="row clearfix"> <div class="lbl"> <label for="name"> 公司名称</label> </div> <div class="ctrl"> <input type="text" id="companyName" name="companyName" data-required="true" data-validation="text" data-msg="Invalid Name" placeholder="company name"> </div> </div> <div class="row clearfix"> <div class="lbl"> <label for="email"> 地址</label> </div> <div class="ctrl"> <input type="text" id="position" name="position" data-required="true" data-validation="custom" data-msg="Invalid Phone #" placeholder="address"> </div> </div> <div class="row clearfix"> <div class="lbl"> <label for="email"> E-Mail</label> </div> <div class="ctrl"> <input type="text" id="email" name="email" data-required="true" data-validation="email" data-msg="Invalid E-Mail" placeholder="Ex: [email protected]"> </div> </div> <div class="row clearfix"> <div class="lbl"> <label for="remarks"> 详细信息</label> </div> <div class="ctrl"> <textarea id="remarks" name="remarks" rows="6" cols="10"></textarea> </div> </div> <div class="row clearfix"> <div class="lbl"> 验证码 </div> <div class="ctrl"> <img alt="验证码" Onclick="this.src='${request.contextPath}/api/defaultKaptcha?d='+new Date()*1" src="${request.contextPath}/api/defaultKaptcha"/> <input type="text" style="width: 20%;margin-top: -5%;" name="vrifyCode" id="vrifyCode" placeholder="验证码"> </div> </div> <div class="row clearfix"> <div class="span10 offset2"> <input type="submit" class="submit" value="提交" Onclick="login()"> </div> </div> </form> <div id="validation"> </div> </div> </section> <script type="text/Javascript"> function login() { $.ajax({ //几个参数需要注意一下 type: "POST",//方法类型 dataType: "json",//预期服务器返回的数据类型 url: "${request.contextPath}/api/putCompany",//url data: $('#form').serialize(), async: false, success: function (result) { // console.log(result);//打印服务端返回的数据(调试用) alert(result) }, error: function () { alert("服务器异常！"); } }) } </script> </body> </html>

不懂哪里出问题了，为什么会打开一个新的页面。

6 条回复 2017-12-21 19:15:30 +08:00