ajax与ssm框架的应用简介

最新推荐文章于 2021-08-05 12:06:15 发布

童懵

最新推荐文章于 2021-08-05 12:06:15 发布

阅读量792

点赞数 4

分类专栏： java异步机制文章标签： ssm+ajax ssm与ajax数据异步传输 ajax与ssm进行数据交互

本文链接：https://blog.csdn.net/weixin_44929998/article/details/89394544

版权

java异步机制专栏收录该内容

2 篇文章 0 订阅

订阅专栏

ajax与ssm框架的应用简介

Ajax简介
ssm关于ajax的配置
最后说明

1.学习本教程需要对ssm框架有一定了解，会配置或看懂配置（本人暂未发表关于ssm教程，故不提供参考教程）
2.学习本教程需要对ajax有一定了解，不会可先去学习ajax的教程：https://blog.csdn.net/weixin_44929998/article/details/89363843
3.学习本教程需要对js有一定应用经验，如果没有也可以根据我提供的代码注释学习
4.本教程为本人原创教程，肯定有些不妥之处，望各位大佬多多指点
5.流程说明：本文先讲解ssm后台代码配置，再进行前端ajax代码编写（）；

Ajax简介

具体说明麻烦移步：https://blog.csdn.net/weixin_44929998/article/details/89363843 观看
倘若有ajax使用基础但是缺乏jar包可以通过：https://download.csdn.net/download/weixin_44929998/11123500 下载

ssm关于ajax的配置

ssm服务端数据接收与返回

controller控制层进行返回的时候，一般返回值是页面名，而不是数据信息
本处主要讲解ssm关于此类配置信息的说明，直接看代码

springmvc配置：

springmvc一般配置controller，在controller函数返回值都是页面名称，这样返回一个页面出来
本处将显示controller层注解来解决这一问题代码如下

1.spring-mvc.xml代码块

 <!-- 定义跳转的文件的前后缀 ，视图模式配置-->
    <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!-- 这里的配置我的理解是自动给后面action的方法return的字符串加上前缀和后缀，变成一个 可用的url地址 -->
        <property name="prefix" value="/" />
        <property name="suffix" value=".jsp" />
    </bean>

2.controller代码块

     @RequestMapping(value="/findUserNo",produces = "text/plain;charset=utf-8")
	 @ResponseBody
	 public String findUserNo(@RequestParam String userNo,Model model,HttpSession session){
		 return “张三”;
	 }
/*
    上面有两个注解 一个是@RequestMapping(value="/findUserNo",produces = "text/plain;charset=utf-8")
    	这个注解主要说明了value=“访问此方法的路径 也就是form表单提交的action值” produces则是为了防止传值乱码
     @ResponseBody 的作用则是为了返回为数据，而不是页面名，这样就便于ajax操作了
*/

ssm前端接收与显示

<!DOCTYPE html>
<html>
  <head>
    <title>ajax.html</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> 
  </head>
  
  <body>
   	<div id="show">
   	</div>
  </body>
  <script>
	setTimeout(	function(){				//setTimeout（copy/function，time）此函数的意思是在间隔为time的时间内执行copy代码
		$.ajax({
			url:'findUserNo.do',				//服务器请求url 相当于form表单action内容
			type:'POST',      					//数据传送方式 method内容
			data:{									//传输给服务器的数据
				'userNo':'********'
			},
			success:function(jsonObject){
				document.getElementById('show').innerHTML=jsonObject		//将服务器传输来的数据加载到页面上面显示
			},
			error:function(jsonObject){
				document.getElementById('show').innerHTML='请求服务器出错'
			}
		})
	},1)

  </script>
  
  
</html>