Arya

---

title: Arya25(学习Ajax)
date: 2020-06-15 18:05:13

tags:

学习原因

当然是Ajax太方便了，但是由于我觉得很难，所以也怕，也就是我今天才学的原因。之前用SSM写小Demo很想用ajax的，奈何当时理解起来有点困难，后面下决心一定要学一下，也就是今天。

SSM框架课程扩展之Ajax学习

AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的web应用程序的技术。
使用ajax要先导入jquery的包，而后编写对应处理的controller，返回消息或者字符串或者json格式的数据；接着编写ajax请求：url:controller请求，data：键值对,success：回调函数；最后给ajax绑定事件，点击click或者失去焦点onblur等等。

案例代码1

我觉得学的时候看的案例很简单明了，需要用的时候模仿着写再改改就行：

Controller层 
查询总用户数
    @RequestMapping(value = "/findTotalUsers.do",method = RequestMethod.GET)
    public @ResponseBody Long findTotalUsers(){
        ModelAndView modelAndView = new ModelAndView();
        Long sum = personService.findTotalUsers();
        System.out.println(sum+"....................................");
        modelAndView.addObject("sum",sum);
        return sum;
    }

Service层
public Long findTotalUsers() {
        return personDao.findTotalUsers();
    }

Dao层
public Long findTotalUsers() {
        String hql = "select count(*) from Person";
        return (Long) this.getSessionFactory().getCurrentSession().createQuery(hql).uniqueResult();
    }

``` 
	ajax代码
	<script src="../js/jquery-1.8.3.min.js" type="text/javascript"></script>
	    <script type="text/javascript">
	        $(document).ready(
	                function ajaxRePost(url,params){
	                    var message = "";
	                    var options={
	                        type:"GET",//请求方式
	                        url:"${pageContext.request.contextPath}/person/findTotalUsers.do",//后台请求路径
	                        data:{},
	                        async:false,//是否异步请求
	                        success:function (msg) {//如果请求成功，返回数据。
	                            message=msg;
	                        }
	                    };
	                    $.ajax(options);
	                    alert(message);
	//                    debugger;
	                    $("#count").text(message);
	                    return message;
	                }
	        )
	 
	    </script>

案例代码2

jsp:

<table class="table table-bordered table-hover table-striped" id="tableuserlist">
                                  <thead>
                                      <tr>
                                          <th>ID</th>
                                          <th>Name</th>
                                          <th>Fullname</th>
                                          <th>Dept</th>
                                          <th>Job</th>
                                      </tr>
                                  </thead>
                                  <tbody>
                                                                               
                            </tbody>
                              </table>

js:

	   <script type="text/javascript">
		$(function (){		
			$.ajax({
				type:"GET",		
				url:"/usercontroller/getuserlist",			
				dataType:"json",
				async:false,//是否异步请求
				success:function(data){			
<!-- //------------遍历对象 .each的使用------------- 
     //前提必须是对象，一般情况下，后台传过来json字符串，要使用相应的方法将其转化为对象（eval、str.parseJSON()、JSON.parse(str)）。
 -->
			var obj=eval(data);//将括号内的表达式（expression）转化为对象
			var tbody=$('<tbody></tbody>');
					   //下面使用each进行遍历 
			$(obj).each(function (index){
			var val=obj[index];
			var tr=$('<tr></tr>');
			tr.append('<td>'+ val.userid + '</td>' + '<td>'+ val.username + '</td>' +'<td>'+ val.userfullname + '</td>' + '<td>'+ val.userdeptid + '</td>'+'<td>'+ val.userjobid + '</td>');
			tbody.append(tr);// append() :在被选元素的结尾插入内容
				});
			$('#tableuserlist tbody').replaceWith(tbody);
				}	
			});
		});
	</script>

controller: 

   	@RequestMapping(value="/getuserlist",method=RequestMethod.GET)
public @ResponseBody List<ErpUser> GetUserList (){
	List<ErpUser> erpuserlist;
	System.out.println("get userlist");
	erpuserlist=userService.GetUserList();
	return erpuserlist;
}

service:

  	public List<ErpUser> GetUserList(){
	return erpUserMapper.selectAllUser();
}

mapper:

 List<ErpUser> selectAllUser();
mapper.xml:
  <select id="selectAllUser" resultMap="BaseResultMap" >
   select
   <include refid="Base_Column_List" />
   from erp_user    
 </select>

至此，完成了ajax 发送url请求，controller拦截后调用service mapper 至mysql查询数据，然后返回json格式数据交由ajax进行页面呈现。