<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>异步提交</title>
<script type="text/javascript" src="staic/js/jquery-3.5.1.js"></script>
<script>
$(function (){
$("#btn").click(function (){
var name=$("#name").val();
var pass =$("#pass").val();
console.log(name+" "+pass);
$.ajax({
url:'param/testJson',
type:'post',
dataType:'json',
data:{username:name,password:pass},
success:function (data){
if(data.type=='success'){
alert(data.msg);
}else{
alert(data.msg);
}
}
})
})
})
</script>
</head>
<body>
<fieldset>
<legend>异步提交</legend>
<div>
账号:<input type="text" name="username" id="name"><br>
密码:<input type="text" name="password" id="pass"><br>
<input type="button" id="btn" value="提交">
</div>
</fieldset>
</body>
</html>
@Controller
@RequestMapping("/param")
public class controller {
/**
* 6、异步加载（结合注解ResponseBody使用）
* @param user
* @return
*/
@RequestMapping("/testJson")
@ResponseBody
public Object param8(User user){
Map map = new HashMap();
map.put("msg",user);
map.put("type","success");
System.out.println(user);
return map;
}
}
|