您的位置：首页 > Web前端 > JQuery

玩转Web之Json（二）----jquery easy ui + Ajax +Json+SQL实现前后台数据交互

2014-03-14 10:52 1041 查看

最近在学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;
}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航