学习使用jquery+ajax（01）

---

layout: _posts
title: 学习使用jquery+ajax（01）
date: 2017-08-05 11:55:48
tags:

---

第一次用以印象笔记己东西，现在在做的项目让我学到了一些东西，这是对jquery+ajax有了一些初步的了解，大概明白了Jquery和Ajax的一些基础用法Jquery，先举了例子，例子如下：

前期准备

环境配置

导入jquery包

有两种方式导入jquery包

本地引入jquery包

首先 Jquery官网上下载jquery.js，然后在自己的页面文件中添加：

CDN引入

CDN引入，在页面文件中添加一下代码：

编写jquery代码

    
    
    
    //引入jquery
    

代码编写

代码实例

$(document).ready.(function(){//预加载
     $("ul a").click(function(){//标签选择器，选择ul下的a标签设置单击事件，点击调用function
          $("#datelist").show();//方法体，标签选择器，show()显示选中的标签
     })
})

在我理解中，jquery就是选中下方的html便签，设置相应的事件，并进行相应的操作，然后动态的更改html的样式或者是值。使用jqery的一些注意事项及要点有一下几点。（我自己理解的...）

• 首先我们要引入包, ，引入之后才能运用jquery的代码。

• $(document).ready(function(){ }),这是入口程序。

• “#”id选择器，"."类选择器，"ul a"ul下的a标签，W3C中写的很清楚。

• $(this),选中当前点击操作的标签，$(this).text()；当前点击的标签中夹的值，如：text,中间夹的值就是text

• jquery中text()、html()、val()的区别：http://www.jianshu.com/p/ce1c173e3ed2，写的很详细。

• 动态添加标签

 $("#datalist").append(
                         ""+val.ip+""+val.acno+""+val.acname+""+val.idcard+"                                                      "+val.acsumd+""   );//在id为datelist的标签后添加标签，添加括号中的标签。

Ajax现在就用过一种，Ajax应该就是Jquery中的一个方法吧，看下面的例子：

前台网页代码

$.ajax({
  url:"${pageContext.request.contextPath }/GetReport_feeratePageCtrl.action", //请求的地址（cootroller中写的地址）
  type:"post", //请求的类型
  data:{"pageIndex":"1","pageSize":"2"}, //请求传入controller的参数
  datetype:"json", //返回值的类型
  success:function(hashMap){ //操作成功的回调函数，hashMap就是回调函数返回值，也就是后台返回的值
  $("#pageIndex").text(hashMap["paging"].pageIndex);//设置当前页数
  $.each(hashMap["Report_feerate"],function(i,val){ //Jquery的循环遍历写法，对hashMap中与键 "Report_feerate"对应的值进行遍历，i是此时，val是值。
  $("#datalist2").append( //在标签后添加html标签
  ""+val.ip+""+val.monthpay+""+val.setmeal+""+val.time+""
  );
  })
  $("#pageCount").text(hashMap["paging"].pageCount);//设置总页数
  }
  })

后台代码

SSM框架中controller层的代码(Servlet)

@ResponseBody //表示是Ajax中使用的，声明
@RequestMapping("/GetReport_feeratePageCtrl")
public HashMap getReport_feerate(Paging paging){ //要是返回的是多个对象则要用hashMap进行传值
paging.setTotalrecord(iReportService.getReport_feerateByFeeRecord());
List Report_feerate = iReportService.getReport_feerateByFee(paging);
HashMap hashMap = new HashMap<>(); //新建一个hashMap
hashMap.put("Report_feerate", Report_feerate); //设置键值对，值可以是任意的，包括集合List
hashMap.put("paging", paging);
return hashMap; //回调函数的返回值
}

总结

这是做项目到时候学习jquery+ajax到时候的学习总结，现在写到博客上记录一下，如果有什么问题以后再来慢慢修改，也欢迎大家多多指点！也附上我博客的链接，欢迎大家多多访问！
https://heartsxin.github.io/
http://heartsxin.coding.me/heartsxin/