玩转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="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;
}
}
玩转Web之Json（二）----jquery easy ui + Ajax +Json+SQL实现前后台数据交互的更多相关文章
- 玩转Web之Json(一)-----easy ui+ajax + json 中关于Json的解析问题
在easy ui中使用Ajax+Json实现前后的数据交互时,当后台数据传输到客户端是需对Json数据进行解析,这里将对Json数据解析做简单总结. (一) 对于服务器返回的数据若没有做类型说明,需要 ...
- Jquery Easy UI Datagrid 上下移动批量保存数据
DataGrid with 上下移动批量保存数据 通过前端变量保存修改数据集合,一次性提交后台执行 本想结合easyui 自带的$('#dg').datagrid('getChanges'); 方法来 ...
- JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单
JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...
- jQuery Easy UI 开发笔记
1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...
- JQuery Easy Ui （Tree树）详解（转）
第一讲:JQuery Easy Ui到底是什么呢? 首先咱们知道JQuery是对Java Script的封装,是一个js库,主要提供的功能是选择器,属性修改和事件绑定等等.. JQuery ui是在j ...
- 7个jquery easy ui 基本组件图解
以下给出7个jquery easy ui 基本组件: 1 基本面板 <!DOCTYPE html> <html> <head> <meta charset=& ...
- JQuery Easy UI 简介
[什么是JQuery Easy UI?] jQuery EasyUI 是一组基于 jQuery 的 UI 插件集合,而 jQuery EasyUI 的目标就是帮助Web 开发者更轻松的打造出功能丰富并 ...
- Jquery easy UI 上中下三栏布局 分类： ASP.NET 2015-02-06 09:19 368人阅读 评论(0) 收藏
效果图: 源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)
一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...
随机推荐
- Visual Assist X 10.8.2052的Crack破解补丁. 2014.11.05 (General release.)
VA小组立即更新频率似有些放缓几乎,版本号都是2个月才更新一次,而这次的更新幅度也还是比較大的,新增了6个特性,而且修正和20余处大大小小的问题,而且也是正式发行版,推荐更新. 对于破解补丁还是老规矩 ...
- cocos2d 走动椭圆
1.效果图 艺术与规划说他想与我合作在全国率先主角光环加,椭圆形走动. cocos2d自带没有,參考网上的写了一个. 2.椭圆数学知识 有关椭圆的数学知识我已经忘光了.网上找了点资料: a是椭圆的长半 ...
- Windows下visual studio code搭建golang开发环境
Windows下visual studio code搭建golang开发环境 序幕 其实环境搭建没什么难的,但是遇到一些问题,主要是有些网站资源访问不了(如:golang.org),导致一些包无法安装 ...
- POJ 3458 Colour Sequence(简单题)
[题意简述]:事实上题意我也没有特别看懂.可是依据它少许的题目描写叙述加上给的例子.就大胆的做了例如以下的推測: 就是说,如今给出一串字符s.然后紧接着给出可见的字符串visible还有隐藏的字符串h ...
- Spring3.0官网文档学习笔记（七）--3.4.2
3.4.2 依赖与配置的细节 3.4.2.1 Straight values (primitives, Strings, and so on) JavaBeans PropertyE ...
- js使用栈来实现10进制转8进制 js取除数 余数
function ten2eight(x){ var s=[]; var r=''; while(x>0){ s.push(x%8); x=parseInt(x/8); } while(s.le ...
- linux中怎样设置DHCP
linux怎样设置DHCP 环境:RH linux 9.0 使用linux下经常使用的dhcpd包. 最新版本号 dhcp3.0.5 下载地址: 下载 1.安装: 先拷贝dhcp-3.0.5.tar. ...
- 关于split与StringTokenizer的理解
关于split与StringTokenizer的理解 一.split 依据匹配给定的正則表達式来拆分此字符串.此方法返回的数组包括此字符串的子字符串,每一个子字符串都由还有一个匹配给定表达式的子 ...
- Learning Cocos2d-x for WP8（6）——场景切换和场景过渡效果
原文:Learning Cocos2d-x for WP8(6)--场景切换和场景过渡效果 C#(wp7)兄弟篇 Learning Cocos2d-x for XNA(6)——场景切换和场景过渡效果 ...
- hdu 3790 （最短路径问题dijkstra）
主题链接:http://acm.hdu.edu.cn/showproblem.php?pid=3790 Problem Description 给你n个点,m条无向边,每条边都有长度d和花费p,给你起 ...