springmvc+ajax异步

最新推荐文章于 2022-02-26 00:52:27 发布

周嗨嗨

最新推荐文章于 2022-02-26 00:52:27 发布

阅读量763

点赞数

CC 4.0 BY-SA版权

分类专栏： SpringMVC 文章标签： springmvc ajax 异步 jsp

本文链接：https://blog.csdn.net/zhouhaisunny/article/details/53728895

SpringMVC 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一个简单的AJAX异步请求示例，通过一个JSP页面发起POST请求到服务器端，服务器根据请求参数返回JSON格式的数据，前端再根据这些数据更新页面上的表单信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、ajax简单异步：

1.jsp页面

<%@ page language="java" import="java.util.Map" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
<link href="http://libs.baidu.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript">
	//请用不但而且造句：写脚本要细心,错一点点不但不执行而且不报错
	function bqctc(id){
		var sign=0;
		$.ajax({
			type:"post",
			async:false,//默认为true,不使用异步false执行时会等success中结束再继续执行下面
			url:"<%=basePath%>ajaxload.htm",
			data:{"id":id},
			dataType:"json",
			success:function(data){
				$("#tname").val(data.name);
				$("#tage").val(data.age);
				$("#taddress").val(data.address);
				alert(data.age);
				if(data.age>18){
					sign=1;
				}
				alert("执行时间一");
			}
		});	
		alert("输出sign"+sign);
		alert("执行时间二");
		if(sign==1){
			alert("成年(此处继续执行另一个ajax)");
		}else{
			alert("未成年(此处继续执行另另一个ajax)");
		}
	}
</script>
</head>
<body>
	<input type="button"  class="btn btn-primary" name="btn" value="点击1" onclick="bqctc(1)"/> 
	<input type="button" class="btn btn-primary" name="btn" value="点击2" onclick="bqctc(2)"/><br/>
	<table>
		<tr>
			<td>name:</td>
			<td><input type="text" value="" id="tname" placeholder="输入name"/></td>
		</tr>
		<tr>
			<td>age:</td>
			<td><input type="text" value="" id="tage" placeholder="输入age"/></td>
		</tr>
		<tr>
			<td>address:</td>
			<td><input type="text" value="" id="taddress" placeholder="输入address"/></td>
		</tr>
	</table>
</body>
</html>

2.controller

/**
	 * ajax实例
	 * @param request
	 * @param response
	 * @param id
	 * @param uv
	 * @return
	 * @throws Exception
	 */
	@RequestMapping("ajaxload")
	public String ajaxLoad(HttpServletRequest request,HttpServletResponse response,@RequestParam("id") String id,UserVo uv) throws Exception{
		//请求和响应中文乱码
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=utf-8");
		//接收ajax的参数,三种方式都可以正常输出
		System.out.println("request获取："+request.getParameter("id"));
		System.out.println("requestparam获取："+id);
		System.out.println("实体类字段获取："+uv.getId());
		JSONObject res=new JSONObject();
		if(Integer.parseInt(id)==1){
			res.put("name", "塔睿");
			res.put("age", 19);
			res.put("address", "地址一");
		}else if(Integer.parseInt(id)==2){
			res.put("name", "阿特");
			res.put("age", 16);
			res.put("address", "地址二");
		}
		response.getWriter().write(res.toString());
		return null;
	}

3.vo

package com.bbaqw.pojo;

/**
 * UserVo实体类
 * @author Administrator
 *
 */
public class UserVo {
	private int id;
	private String name;
	private int age;
	private String address;
	
	
	public int getId() {
		return id;
	}
	public void setId(int id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
	
}