zoukankan      html  css  js  c++  java
  • 玩转Web之Json(二)----jquery easy ui + Ajax +Json+SQL实现前后台数据交互

    最近在学Json,在网上也找过一些资料,觉得有点乱,在这里,我以easy ui的登录界面为例来说一下怎样用Json实现前后台的数据交互

    使用Json,首先需要导入一些jar包,这些资源可以在网上下载到,然后导入到项目中即可。

    首先我先把代码贴出来,有些地方会着重说明一下:

    客户端代码如下:

    <%@page pageEncoding="utf-8"%>
    <!DOCTYPE html>
    <html>
      <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
      <script type="text/javascript" src="../jquery-easyui-1.3.5/jquery.min.js" charset="utf-8"></script>
      <script type="text/javascript" src="../jquery-easyui-1.3.5/jquery.easyui.min.js" charset="utf-8"></script>
      <link rel="stylesheet" href="../jquery-easyui-1.3.5/themes/default/easyui.css" type="text/css" ></link>
      <link rel="stylesheet" href="../jquery-easyui-1.3.5/themes/icon.css" type="text/css" ></link>
      <script type="text/javascript" src="../jquery-easyui-1.3.5/locale/easyui-lang-zh_CN.js" charset="utf-8"></script>
      <script type="text/javascript" charset="utf-8">
      var loginAndRegDialog;
      $(function(){
        loginAndRegDialog=$('#loginAndRegDialog').dialog({
          
           closable:false,          //隐藏关闭按钮
           modal:true,              //模式化窗口,只可单击最上层的窗口
           buttons:[{text:'登录',
                     handler:function(){
                           $.ajax({
                             url:'../servlet/UserContro', //后台的路径,看具体情况定
                             data :{
                                   name: $('#loginInputForm input[name=name]').val(),//传向服务器的数据
                                   password:$('#loginInputForm input[name=password]').val()  
                                   },
                              dataType:'json',//接收的数据为json格式,这里还有其他方法,可以看我关于Json解析的那篇文章
                              success:function(data){   //Json为返回的Json对象,名字自己起 
                                $.messager.alert('通知',data.msg);          
                              }, 
                              error:function(){
                               $.messager.alert('通知',"错误");       
                              }     
                          }); 
                        
                     }},{       //handler:按钮的点击事件
                     text:'注册',
                     handler:function(){
                   
                                          }}] 
        });
      });
      </script>
      
      </head>
      
      <body>
       <div  id="loginAndRegDialog" title="用户登录" style="250px;height:150px;"> 
       <form id="loginInputForm"  method="post">
         <table>
              <tr>
                <th>用户名</th>
                <td><input type="text" name="name"></td>
              </tr>
              <tr>
                <th>密  码</th>
                <td><input name="password" type="password"></td>
              </tr>
         </table>
         
        </form>
       </div>
      </body>
    </html>
    

    服务器端代码如下:

    package thejavabean;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    import java.sql.SQLException;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import net.sf.json.JSONObject;
    
    public class UserContro extends HttpServlet {
    
    	public void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    
             	request.setCharacterEncoding("UTF-8");  //接收数据的编码格式
    	        response.setCharacterEncoding("UTF-8"); //返回数据的编码格式为utf-8,防止客户端乱码 
    		response.setContentType("text/json");
        		PrintWriter out = response.getWriter();
    		String name=request.getParameter("name");//接收数据
    		String password=request.getParameter("password");
    		String msg="";
    		JSONObject  jobj = new JSONObject();//把要传向客户端的数据转为Json字符串
                    jobj.put("msg",login(name,password));
    		response.getWriter().write(jobj.toString());//向客户端返回数据	    
    		out.flush();
    		out.close();
    	
    	}
    	public String login(String name,String password){
    	    User user=new User();
    	    user.setName(name);
    	    user.setPassword(password);
    	   	try {
    			if(user.login()!=null)
    			 	return "登录成功";
    			 else 
    			    return "用户名或密码错误";
    		} catch (SQLException e) {
    			e.printStackTrace();
    		}    
    	   	return null;
    	 }
    	 */
    	public void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    	}
    
    }
    

    User 类

    public class User {
         private String name;
         private String password;
      	public String getName() {
    		return name;
    	}
    	public void setName(String name) {
    		this.name = name;
    	}
    	public String getPassword() {
    		return password;
    	}
    	public void setPassword(String password) {
    		this.password = password;
    	}
         DBConnection dbc=new DBConnection();
    	//用户登录
    	public User login() throws SQLException{
    		Connection conn=null;
    		PreparedStatement ps=null;
    		ResultSet rs;
    		User user=null;
    		try{
    		conn=dbc.getConnection();
    		String sql="select * from [user] where name=? and password=?";
    		ps=conn.prepareStatement(sql);
    		ps.setString(1,name);
    		ps.setString(2,password);
    		rs=ps.executeQuery();
    		if(rs.next()){
    			user=new User();
    			user.setName(rs.getString("name"));
    			user.setPassword("password");
    		}
    		}finally{
    		ps.close();
    		conn.close();
    		}
    		return user;
    	}


    简单封装的DB:

    public class DBConnection {
       private  String user="sa";
       private  String password="aaaaaa";
       private  String url="jdbc:sqlserver://localhost:1433;DatabaseName=team";
       private static String driverName = "com.microsoft.sqlserver.jdbc.SQLServerDriver";
       Connection conn;
       PreparedStatement ps;
       ResultSet rs;
       
       
       static{
    	try {
    		Class.forName(driverName);
    	} catch (ClassNotFoundException e) {
    	     System.out.println("驱动加载失败");
    	}
       }
       
       public  Connection getConnection() throws SQLException{   
    		conn=DriverManager.getConnection(url,user,password);
    	     return conn;
       }
      
    }




     

  • 相关阅读:
    0909《操作系统教程》理解和认识
    1230《操作系统教程》实验四 主存空间的分配和回收模拟
    1203《操作系统教程》实验三 进程调度模拟程序 ——实验点评
    1203《操作系统教程》实验三 进程调度模拟程序
    1111《操作系统教程》实验二 作业调度模拟程序
    实验四 主存空间的分配和回收模拟
    实验三同学互评
    实验三 进程调度模拟程序
    实验二、作业调度模拟实验
    实验一报告
  • 原文地址:https://www.cnblogs.com/oversea201405/p/3752193.html
Copyright © 2011-2022 走看看