JSON+AJAX的应用

主要内容:

- JSON数据格式

- AJAX异步请求

- 利用JSON+AJAX进行用户名的判断

- 利用JSON+AJAX进行省、市、区信息联动

详细记录:
1 JSON数据格式
JS中的JSON
JAVA中的JSON:
引入JAR包:
commons-beanutils-1.7.0.jar
commons-collections-3.1.jar
commons-httpclient-3.1.jar
commons-lang-2.5.jar
commons-logging-1.0.4.jar
ezmorph-1.0.3.jar
json-lib-2.1-jdk15.jar
测试类:

(1)自定义JSON类对象

import net.sf.json.JSONObject;
public class TestJSON {
         public static void main(String[] args) {
                   JSONObject obj=new JSONObject();
                   obj.put("name", "zb");
                   obj.put("age", 20);
                   obj.put("birth", "1998-11-1");
                   System.out.println(obj);
         }
}

执行:{“birth”:”1998-11-1”,”age”:20,”name”:”zb”}

(2)由MAP生成JSON类对象

public class TestJSON {
         public static void main(String[] args) {
                   Map obj=new HashMap();
                   obj.put("name", "zb");
                   obj.put("age", 20);
                   obj.put("birth", "1998-11-1");
                   JSONObject objJSON=JSONObject.fromObject(obj);
                   System.out.println(objJSON);
         }
}

执行结果:{“birth”:”1998-11-1”,”name”:”zb”,”age”:20}

(3)由JAVA集合生成JSON数组对象

public class TestJSON {
   
         public static void main(String[] args) {
                   List<Map> list=new ArrayList<Map>();
                   Map obj1=new HashMap();
                   obj1.put("name", "zb");
                   obj1.put("age", 20);
                   obj1.put("birth", "1998-11-1");
                   list.add(obj1);
                   Map obj2=new HashMap();
                   obj2.put("name", "zb2");
                   obj2.put("age", 22);
                   obj2.put("birth", "1996-1-1");
                   list.add(obj2);
                   JSONArray array=JSONArray.fromObject(list);
                   System.out.println(array);
         }
}

执行结果:[{“birth”:”1998-11-1”,”age”:20,”name”:”zb”},{“birth”:”1996-1-1”,”age”:22,”name”:”zb2”}]

(4)由JavaBean生成JSON类对象

User类的定义:

package cn.sdut.po;
public class User {
   
         private int id;
         private String name;
         private String password;
         private String sex;
         private String birthday;
         private String hobby;
         private String telephone;
         private String address;
         private int type;     
         public User() {
                   super();
         }
         public User(int id, String name, String password, String sex,
                            String birthday, String hobby, String telephone, String address,
                            int type) {
                   super();
                   this.id = id;
                   this.name = name;
                   this.password = password;
                   this.sex = sex;
                   this.birthday = birthday;
                   this.hobby = hobby;
                   this.telephone = telephone;
                   this.address = address;
                   this.type = type;
         }
         public int getId() {
                   return id;
         }
         public void setId(int id) {
                   this.id = id;
         }
         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;
         }
         public String getSex() {
                   return sex;
         }
         public void setSex(String sex) {
                   this.sex = sex;
         }
         public String getBirthday() {
                   return birthday;
         }
         public void setBirthday(String birthday) {
                   this.birthday = birthday;
         }
         public String getHobby() {
                   return hobby;
         }
         public void setHobby(String hobby) {
                   this.hobby = hobby;
         }
         public String getTelephone() {
                   return telephone;
         }
         public void setTelephone(String telephone) {
                   this.telephone = telephone;
         }
         public String getAddress() {
                   return address;
         }
         public void setAddress(String address) {
                   this.address = address;
         }
         public int getType() {
                   return type;
         }
         public void setType(int type) {
                   this.type = type;
         }
         @Override
         public String toString() {
                   return "User [id=" + id + ", name=" + name + ", password=" + password
                                     + ", sex=" + sex + ", birthday=" + birthday + ", hobby="
                                     + hobby + ", telephone=" + telephone + ", address=" + address
                                     + ", type=" + type + "]";
         }
}

测试类:

package cn.sdut.po;
import net.sf.json.JSONObject;
public class TestJSON {
         public static void main(String[] args) {
                   User user=new User(1,"李华","1111","女","1999-1-1","体育","122342","淄博",1);
                   JSONObject userJson=JSONObject.fromObject(user);
                   System.out.println(userJson.toString());
         }
}

执行:{“id”:1,”birthday”:”1999-1-1”,”sex”:”女”,”address”:”淄博”,”name”:”李华”,”hobby”:”体育”,”type”:1,”telephone”:”122342”,”password”:”1111”}


2 AJAX异步请求


3 利用JSON+AJAX进行用户名的判断

过程分析:

(1)数据库层面的支持——根据用户名查询用户对象
(2)JSP页面的支持——“姓名”文本框内容改变时,需要响应onchange事件(或者onblur事件),另外,在姓名输入框后加个提示信息的控件,用于显示用户名是否可用。
(3)Servlet的处理——获得用户名,根据用户名查询用户,若查到,就返回页面“true”,否则返回“false”
(4)JSP页面根据返回值“true”还是“false”,进行不同的处理。 详细代码:

(1)数据库层面的支持——根据用户名查询用户对象(UserDao.java)

DBUtilsBaseDao.java

package cn.sdut.dao;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
import java.util.List;
import org.apache.commons.dbutils.DbUtils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanListHandler;
public class DBUtilsBaseDao {
   
         //得到数据库连接
         public  Connection getConn()
         {
                   Connection conn=null;
                   DbUtils.loadDriver("com.mysql.jdbc.Driver");
                   try {
                            conn=DriverManager.getConnection("jdbc:mysql://localhost:3306/shopping?useUnicode=true&characterEncoding=utf-8","root","usbw");
                  } catch (SQLException e) {
                            // TODO Auto-generated catch block
                            e.printStackTrace();
                   }
                   return conn;
         }

         //增、删、改数据库的方法
         public int update(String sql,Object... param)
         {
                   int result=0;
                   Connection conn=getConn(); //得到连接
                   QueryRunner runner=new QueryRunner();  //得到运行对象
                   try {
                            result=runner.update(conn, sql, param); //进行数据库操作
                   } catch (SQLException e) {
                            e.printStackTrace();
                   }
                   finally
                   {
                            DbUtils.closeQuietly(conn);  //关闭数据库连接
                   }
                   return result;
         }

         //数据库查询
         public List query(String sql,Class clazz,Object... param)
         {
                   List list=null;
                   Connection conn=getConn(); //得到连接
                   QueryRunner runner=new QueryRunner();  //得到运行对象
                   try {
                            list=runner.query(conn,sql,new BeanListHandler(clazz),param); //进行数据库操作
                   } catch (SQLException e) {
                            e.printStackTrace();
                   }
                   finally
  • 0
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的 jQuery、AjaxJSON 实现的登录注册示例: HTML 代码: ```html <form id="loginForm"> <input type="text" name="username" placeholder="用户名"><br> <input type="password" name="password" placeholder="密码"><br> <button type="submit">登录</button> </form> <form id="registerForm"> <input type="text" name="username" placeholder="用户名"><br> <input type="password" name="password" placeholder="密码"><br> <input type="password" name="confirmPassword" placeholder="确认密码"><br> <button type="submit">注册</button> </form> ``` jQuery 代码: ```javascript $(function () { // 登录表单提交 $('#loginForm').submit(function (e) { e.preventDefault(); // 阻止表单默认提交行为 var data = $(this).serialize(); // 序列化表单数据 $.ajax({ url: '/api/login', type: 'POST', data: data, dataType: 'json', // 响应数据类型为 JSON success: function (response) { alert(response.msg); // 弹出响应消息 if (response.code === 0) { // 登录成功,跳转到首页 window.location.href = '/'; } }, error: function () { alert('网络错误,请稍后再试!'); } }); }); // 注册表单提交 $('#registerForm').submit(function (e) { e.preventDefault(); // 阻止表单默认提交行为 var data = $(this).serialize(); // 序列化表单数据 $.ajax({ url: '/api/register', type: 'POST', data: data, dataType: 'json', // 响应数据类型为 JSON success: function (response) { alert(response.msg); // 弹出响应消息 if (response.code === 0) { // 注册成功,跳转到登录页面 window.location.href = '/login'; } }, error: function () { alert('网络错误,请稍后再试!'); } }); }); }); ``` 后端接口代码(使用 Express 框架): ```javascript const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); // 模拟用户数据 let users = [ { username: 'admin', password: 'admin123' } ]; // 登录接口 app.post('/api/login', (req, res) => { const { username, password } = req.body; const user = users.find(u => u.username === username && u.password === password); if (user) { res.json({ code: 0, msg: '登录成功!' }); } else { res.json({ code: -1, msg: '用户名或密码错误!' }); } }); // 注册接口 app.post('/api/register', (req, res) => { const { username, password, confirmPassword } = req.body; if (username && password && confirmPassword && password === confirmPassword) { const user = users.find(u => u.username === username); if (user) { res.json({ code: -1, msg: '用户名已存在!' }); } else { users.push({ username, password }); res.json({ code: 0, msg: '注册成功!' }); } } else { res.json({ code: -1, msg: '参数错误!' }); } }); app.listen(3000, () => { console.log('Server started on port 3000'); }); ``` 注意,这只是一个简单的示例,实际应用中还需要进行参数校验、加密等操作,以确保安全性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值