Springboot ajax异步交互中相关问题

最新推荐文章于 2023-04-03 20:56:06 发布

你能不能别说话

最新推荐文章于 2023-04-03 20:56:06 发布

阅读量2.8k

点赞数

分类专栏： JavaWEB

本文链接：https://blog.csdn.net/sinat_24048051/article/details/77622286

版权

JavaWEB 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

问题产生：

对于页面（如登录）提交的信息，不能用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" οnsubmit="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;

@Controller
public 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")
	@ResponseBody
	public 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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Springboot ajax异步交互中相关问题

问题产生：对于页面（如登录）提交的信息，不能用get方式，需要用post方式来将相关数组放入到请求体里。但是因为使用的是Restful API,所以对于验证后，会直接返回json格式数据。（只有get方式才能返回视图，post返回不了，会报错）所以应该是返回数据后，前台根据返回的数据展示，或是根据返回的状态码（服务端可以任意传一个）跳转到相应页面。然后这里，前台的页面ajax请求，
复制链接

扫一扫