java学习笔记——众筹项目练习——后台manager程序广告管理、使用ajax发送数据

                                       manager程序广告管理

我们的众筹项目是由两个子系统组成的，管理员使用的manager系统和会员使用的众筹系统。在前面的文章中我们基本上已经将manager程序中的正删改查功能都介绍完啦!今天本来打算开始实行前台会员使用的众筹系统，可是打开众筹系统首页的原型页面时想到，首页展示的3个广告哪里来的？？？

靠！当然应该是管理人员在后台系统上传配置出来的！那么文件上传在manager程序中我们还需要来实现一下吧。

首先修改广告管理菜单，发送获取广告管理数据请求，并跳转到广告列表页面。

为广告管理菜单添加请求。

在controller中添加处理方法，方法很简单，直接返回广告列表显示页面advertisement.jsp。所有的处理请求我们都是在页面中使用ajax完成的。

 

在页面刚加载完成的时候发送ajax请求获取广告列表，发送请求时附带分页信息（fn）。

在ajax的成功回调中将返回的广告列表数据显示到页面上，并更新下边的页码和分页按钮。

 

在controller中使用分页插件pagehelp处理发送的ajax  /manager/advertisment/json请求。

service层也很简单，直接获取所有数据就可以啦！（因为我们使用了分页插件，获取到所有的广告数据后只需要传入页码就可以获取相应页数的数据啦）

上边有两个地方需要注意一下。在创建分页按钮时，分页按钮当中有一个末页按钮可以获取到最后一页的广告数据。那么我们如何知道广告的最后一页是多少页呢？查来查去的太麻烦！这里有一个简单的方法！开启mybatis分页插件的分页合理化功能。这样的话我们在获取某一页广告数据时，将页数pn传一个最大值9999就可以啦！

如何开启mybatis分页插件的分页合理化功能呢？我们还需要去mybatis配置文件中配置。那么mybatis的配置文件在哪里呢？mybatis的配置文件在dao中。

另一个需要注意的地方就是，这里我们又使用了一个新的插件layer-v3.0.3。layer这个插件是专门用于弹出层的显示件。使用非常简单。将文件夹添加到项目再加载其中的js就可以啦。

 

这样我们在数据库中造一些假数据，然后去页面看看效果吧。

接下来添加广告的添加功能，点击新增按钮，弹出模态框来编辑广告信息，并发送上传的ajax请求。

为新增按钮绑定一个方法，点击新增后显示新增模态框。

这里的模态框中，虽然在form表单中添加了请求地址，但我们却没有使用。我们这里不使用form表单提交数据（上传文件）。我们使用一个新的技术----ajax来上传文件。

为模态框中的确定按钮绑定方法。点击按钮后在这个方法中获取这个模态框中的数据，并使用ajax发送上传广告信息的请求。

这里需要注意的是，ajax默认是会将请求的参数做一些编码处理的，那我们想要上传的广告图片文件也是请求参数，如果在发送请求的过程中被ajax修改了的话不就上传不了了吗？，那我们如何上传呢？？？所以我们来设置两个参数来实现让ajax不出来请求参数，从而完成文件上传的功能。

在controller中处理文件上传请求。

我们在项目中创建一个用于保存上传文件的文件夹/advertisments。在接收的时候将MultipartFile file多部件文件数据file保存到/advertisments文件夹中即可。

service端的处理也很简单，就是调用dao层将上传的多部件广告信息插入到数据库中。

注意！！！

想要使用上边的多部件文件上传功能，我们还需要一些配置。

1，添加Commons-fileupload依赖。

2，在spring-mvc的配置文件中添加文件上传解析器multipartResolver。

这样我们提交的广告图片就可以上传到服务器啦！不过在我们选中某张图片的时候还想在新增的模态框中预览一下这张图片。

那我们就为模态框中可以选中文件的input绑定一个change事件。只要有变化就会触发这个事件，那我们就可以在模态框中下边的空白区域div中展示图片啦。

这样我们的图片上传就完美的完成啦！

看看效果吧！

来到广告管理页面展示广告列表，点击新增按钮弹出添加广告模态框。

在添加广告模态框中编辑广告名称，添加广告图片后，下方会显示预览选中后的图片，并点击确定，上传。。

上传完成，刷新广告列表，自动跳转到最后一页。

ok，图片上传这个功能也这么和谐的完成啦。

接下来呢！我们再来实现一个每个广告图片的预览功能，还记得我们在显示广告列表的时候，在每一列广告后边都插入了三个按钮，分别是预览、编辑、删除。编辑和删除这两个功能没啥说的很简单！那么预览呢？上边新增的时候我们在模态框中实现了一个图片的预览，这里我们就使用layer作为弹出框来显示预览的图片吧！

方法也很简单为广告列表中的每一条广告后的预览按钮都要绑定点击事件，在事件中创建layer并显示图片。由于广告列表中的广告数据是后添加的，所以普通的查找元素在绑定方法肯定是不行的，这里使用on事件委托机制来监听事件。使用方法就是找到我们想要监听的所有元素的父元素（再上层一点也没关系，能确定具体元素就好），在父元素上使用on（参数1，参数2，参数3）方法，参数1是我们想要监听的事件（比如"click"，可以是一个也可以是多个），参数2是我们要在父元素中监听的某一个具体子元素（比如".showimg"是想监听class为showimg的子元素），参数3就是我们监听到某一元素触发某一事件后的处理方法啦！

属性url是我们事先在为广告列表添加每一条广告后边按钮时添加到预览按钮当中的属性。

感受一下我们的成果吧！

弹框比较丑！还有待提高呵呵。。

 

                                        使用ajax发送数据

之前我们就使用过ajax来发送数据啦，现在我们来整理一下使用ajax发送from数据的相关知识吧！

form数据一般有两种类型；一直是普通form数据，另一种是多部件表单数据（也就是文件项）。他们的在于form表单中的

enctype属性不同。普通表单enctype属性的默认值是"application/x-www-form-urlencoded"。多部件表单enctype属性的值就必须是"multipart/form-data"啦！

刚才我们说的form表单数据类型在原生的表单提交时，才会使用到。那么我们要是使用ajax来提交表单中的数据也想达到同样的效果该如何操作呢？那就要使用ajax中的processData参数和contentType参数啦！他们的参数默认都是true，在发送普通数据时ajax会对我们传入的参数进行编码处理。如果我们想要发送多部件数据时，那我们的数据就不应该被处理（不应该被修改），所以这两个参数都应该改成false。

 

Ajax上传各种表单；

1）、普通表单（input）  enctype="application/x-www-form-urlencoded"

 

<form action="${ctp }/servicectrl/ads/upload" id="ad_form" method="post" >

<input type="text" class="form-control" id="ad_name_input" name="name"  />

<input type="text" class="form-control" id="ad_name2_input" name="user"  />

<input type="text" class="form-control" id="ad_name3_input" name="pwd"  />

</form>              

$.get(

          "${ctp }/servicectrl/ads/upload",

          {name:$("#ad_name_input ").val(),user:$("#ad_name2_input ").val(),pwd:$("#ad_name3_input ").val() },

          function(data){

                   console.log(data); 

          }

);

 

---

 

$.post(

          "${ctp }/servicectrl/ads/upload",

          {name:$("#ad_name_input ").val(),user:$("#ad_name2_input ").val(),pwd:$("#ad_name3_input ").val() },

          function(data){

                   console.log(data); 

          }

);

 

 

---

$.ajax({

     url:"${ctp }/servicectrl/ads/upload ",

     data:"name=1&pwd=2&user=3",//需要传递的数据（两种写法：1：name=1&pwd=2&user=3 ）

                                                            //2：js对象：{name:“zhangsan”,user:"李四",pwd:"abc" },还是会转为k=v&k=v的形式

     type:"get",//请求方式

     dataType：“json”，//预期返回的数据类型

     success:function(data){

          console.log(data);//成功返回的数据

     },

     error:function(data){

           console.log(data);//封装失败信息的 

     }

})

以上都只是针对普通表单提交；

//原生表单想要提交所有数据；快速获取到所有数据的k=v&k=v放在提交的数据上

                   alert($("form:first").serialize());

因为他：processData；默认是true

 

(默认: true) 默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

---

 

2）、多部件表单（文件项） enctype="multipart/form-data"

1、传递数据的方式不行了：

          {user:$("#ad_name3_input ").val()}

 

          $.ajax({

                url:"${ctp }/servicectrl/ads/upload",

                type:"post",

                data:new FormData($("#ad_form")[0]),

                processData:false,//告诉ajax不要处理和编码这些数据，直接提交

                contentType:false,//不使用默认的内容类型

                success:function(result){

                    console.log(result);

                },

                error:function(e){

                    console.log(e);

                }

            });

//使用FormData进行部分数据提交；

//文件上传表单；一次提交所有项，快捷方式使用formData包装： new FormData($("#form01")[0])

//普通表单提交部分内容；

 

//FormData()：自定义内容；使用append添加自定义的项

            var fd = new FormData();

            //添加一项要提交的内容；使用append即可

            fd.append("name",$("#ad_name_input").val());

            fd.append("ad",$("#ad_file_input")[0].files[0])；

            //取出文件项的真正文件信息；

             $(选出文件项_file_input)[0].files[0]:

            fd.append("pwd","pwd");

 

 

2、processData不能是true；

 

最后再将我写的例子程序放在这里，以供需要时查询和回顾：https://download.csdn.net/download/qq_25106373/11259980