程序员的资源宝库

网站首页 > gitee 正文

玩转Web之Json(二)----jquery easy ui Ajax JsonSQL实现前后台数据交互

sanyeah 2024-04-04 11:08:45 gitee 5 ℃ 0 评论

最近在学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="width: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;
   }
  
}




 

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

Tags:

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表