学习使用jquery+ajax（01）

2017-08-05 本文已影响0人 Heartsxin

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，然后在自己的页面文件中添加：

<script src="jquery.js"></script>

CDN引入

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

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

编写jquery代码

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
    //引入jquery
    <script type="text/javascript">
        $(document).ready(function(){
            //自身要写的jQuery代码
        });
    </script>
</head>

代码编写

代码实例

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

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

首先我们要引入包, <script src="${pageContext.request.contextPath }/js/jquery-1.12.4.js"></script>，引入之后才能运用jquery的代码。
$(document).ready(function(){ }),这是入口程序。
“#”id选择器，"."类选择器，"ul a"ul下的a标签，W3C中写的很清楚。
$(this),选中当前点击操作的标签，$(this).text()；当前点击的标签中夹的值，如：<a>text</a>,中间夹的值就是text
jquery中text()、html()、val()的区别：http://www.jianshu.com/p/ce1c173e3ed2，写的很详细。
动态添加标签

 $("#datalist").append(
                         "<tr><td>"+val.ip+"</td><td>"+val.acno+"</td><td>"+val.acname+"</td><td>"+val.idcard+"</td>                                                      <td>"+val.acsumd+"</td></tr>"   );//在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标签
  "<tr><td>"+val.ip+"</td><td>"+val.monthpay+"</td><td>"+val.setmeal+"</td><td>"+val.time+"</td></tr>"
  );
  })
  $("#pageCount").text(hashMap["paging"].pageCount);//设置总页数
  }
  })

后台代码

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

@ResponseBody //表示是Ajax中使用的，声明
@RequestMapping("/GetReport_feeratePageCtrl")
public HashMap<String, Object> getReport_feerate(Paging paging){ //要是返回的是多个对象则要用hashMap进行传值
paging.setTotalrecord(iReportService.getReport_feerateByFeeRecord());
List<Report_feerate> Report_feerate = iReportService.getReport_feerateByFee(paging);
HashMap<String, Object> 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/