使用jquery ui做弹框+使用$.get访问servlet并传参

刚刚接触jquery,很多东西都不是很理解,主要还是停留在copy代码的位置上,现对今天学到的知识总结如下:

1.        $('#dialog1')代表获取id为dialog1的元素

2.       Jquery弹框:

这里使用了jquery ui (访问http://jqueryui.com/ )

通过用户自定义得到自己想要的弹框样式,并根据需要勾掉一些不用的功能,然后下载文件到本地.

在jsp中引入文件夹中所带的文件

jquery-ui-1.7.3.custom.css    --自定义的样式文件,如果要修改弹框样式可以改这个

jquery-1.3.2.min.js

jquery-ui-1.7.3.custom.min.js

这样就可以在自己的页面中使用Jquery弹框了,使用方法是:

(1)     首先,要在body中建立一个div并指定其id,这个div就是放置弹框中的内容,可以按照自己的想法来设计及修改.如:

<div id="dialog1" title="注意"></div>

(2)     然后在js中写入dialog1的声明:

<script type="text/javascript">

$(function(){

       $('#dialog4').dialog({  

           autoOpen: false,

           width: 375,

           position:[180,60],

           buttons: {

               "更新": function() {

                  $(this).dialog("close");

              },

              "取消": function() {

                  $(this).dialog("close");

              }

           }

     });

});

</script>

其中position可以设置弹框的位置,buttons中的function可以定义自己想要触发的事件

(3)     在事件触发中弹出dialog

$('#dialog2').dialog('open');

(4)     当想要重复使用同一dialog时可以修改:

若修改提示的button,可使用语句:

$('#dialog1').dialog('option', 'buttons',{

                  "确定": function() {

                     $(this).dialog("close");

                  }

            });

若想修改提示文字,可使用:

$('#dialog1').html('请选择要删除的条目!');

 

3.       Jquery的使用

(1)     获取text的值: $('#select').val(),该值不能进行设置,若要设置需要通过attr来实现.

(2)     获取某元素某个属性的css值:  $('#select').css(“display”)

(3)     设置某元素某个属性的css值:  $('#select').css(“display”,’none’)

Display正常时是$('#select').css(“display”,’’)

(4)     访问servlet并传参

这里访问servlet的方式是:

 var name=$('#name').val();

       var parentid=$('#parentid').val();

       var comments=$('#comments').val();

       $.get("DeviceTypeAdd",{name:name,parentid:parentid},

           function dedit(data){                   

              //alert(data);//很多时候数据出错我都会通过弹data值来差错

              if(data=="true"){

                  $('#dialog3').html('添加成功!');    

              }

              else{

                  $('#dialog3').html('添加失败!');

              }

              $('#dialog3').dialog('open');

        });

(在刚开始做这部分的时候很不理解,以为jquery访问servlet和在MVC架构中使用servlet一样,访问完后会进行页面的跳转.而事实上,jquery在通过$.get方式访问后,还会回到原来的jsp页面,只是返回一个data值来表示访问成功.我们通常使用这个data值来传递一些有用的信息.比如返回json数组,会在下一篇里详细说说)

其中$.get要注意在servlet中有相应的doGet操作

传参要在servlet中有相应的request.getparameter

如果传的是数组,也可以是request.getparametervalues

若servlet运行成功,会返回一个data,这个data值可以在servlet中通过out.write输出得到:

以与上面的js对应的servlet为例

/*DevicetypeAdd.java*/

 

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  // TODO Auto-generated method stub
  response.setContentType("text/html");
  request.setCharacterEncoding("UTF-8");/*解决中文乱码的问题*/
   response.setCharacterEncoding("UTF-8");
        PrintWriter out = response.getWriter();
        boolean data=true;
        
  String name=request.getParameter("name");
  int parentid=2;
  String comments=request.getParameter("comments");
  Connection conn=null;
  PreparedStatement ps=null;
  ResultSet rs=null;
  try{
   conn=DBConnection.getConnection(); 
   ps=conn.prepareStatement(
   "insert into ddpms_devicetype values(ddpms_devicetype_seq.nextval,?,?,?)");
   ps.setString(1, name);
   ps.setInt(2,parentid);
   ps.setString(3,comments);
   int flag=ps.executeUpdate();
   if(flag!=1)
    data=false;
  }catch(Exception e){
   e.printStackTrace();
  }
  finally{
   try{
    DBConnection.dbClose(conn,ps,rs); //释放数据库连接资源
   }catch(Exception e){
    e.printStackTrace();
   }
  }
  out.write(String.valueOf(data));
 }

  

 

4.       Js的退出操作是: return  false;