javaScript StringBuilder、form2Json、form 转换为json 字符串

本文介绍了一种不依赖外部库的方法,用纯JavaScript实现StringBuilder类和Map类,包括各种实用的方法如append、put、get等,并展示了如何将表单转换为JSON字符串。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    没有依赖 js库

function StringBuilder(){
	this._element_ = new Array();
	this.append = function(item) {
		this._element_.push(item);
	}
	this.toString = function() {
		return this._element_.join("");
	}
	this.toJsonString = function() {
		return this._element_.join(",");
	}
	this.join = function(separator) {
		return this._element_.join(separator);
	}
	this.length = function() {
		return this._element_.length;
	}	
}
function Map() {
	this.elements = new Array();
	// 获取MAP元素个数
	this.size = function() {
		return this.elements.length;
	}
	// 判断MAP是否为空
	this.isEmpty = function() {
		return (this.elements.length < 1);
	}
	// 删除MAP所有元素
	this.clear = function() {
		this.elements = new Array();
	}
	// 向MAP中增加元素(key, value)
	this.put = function(_key, _value) {
		this.elements.push({key : _key,value : _value});
	}	
	//增加元素并覆盖
	this.putOverride = function(_key,_value){
		this.remove(_key);
		this.put(_key,_value);
	}
	// 删除指定KEY的元素,成功返回True,失败返回False
	this.remove = function(_key) {
		var bln = false;
		try {
			for (i = 0; i < this.elements.length; i++) {
				if (this.elements[i].key == _key) {
					this.elements.splice(i, 1);
					return true;
				}
			}
		} catch (e) {
			bln = false;
		}
		return bln;
	}

	// 获取指定KEY的元素值VALUE,失败返回NULL
	this.get = function(_key) {
		try {
			for (i = 0; i < this.elements.length; i++) {
				if (this.elements[i].key == _key) {
					return this.elements[i].value;
				}
			}
		} catch (e) {
			return null;
		}
	}
	// 获取指定索引的元素(使用element.key,element.value获取KEY和VALUE),失败返回NULL
	this.element = function(_index) {
		if (_index < 0 || _index >= this.elements.length) {
			return null;
		}
		return this.elements[_index];
	}
	// 判断MAP中是否含有指定KEY的元素
	this.containsKey = function(_key) {
		var bln = false;
		try {
			for (i = 0; i < this.elements.length; i++) {
				if (this.elements[i].key == _key) {
					bln = true;
				}
			}
		} catch (e) {
			bln = false;
		}
		return bln;
	}
	// 判断MAP中是否含有指定VALUE的元素
	this.containsValue = function(_value) {
		var bln = false;
		try {
			for (i = 0; i < this.elements.length; i++) {
				if (this.elements[i].value == _value) {
					bln = true;
				}
			}
		} catch (e) {
			bln = false;
		}
		return bln;
	}
	// 获取MAP中所有VALUE的数组(ARRAY)
	this.values = function() {
		var arr = new Array();
		for (i = 0; i < this.elements.length; i++) {
			arr.push(this.elements[i].value);
		}
		return arr;
	}
	// 获取MAP中所有KEY的数组(ARRAY)
	this.keys = function() {
		var arr = new Array();
		for (i = 0; i < this.elements.length; i++) {
			arr.push(this.elements[i].key);
		}
		return arr;
	}
}

   /*form 转换为json 字符串*/

function form2Json(formName){
var form=document.getElementById(formName);
var sb=new StringBuilder();var rcs=new Map();
	for ( var i = 0; i < form.elements.length; i++){
		var element = form.elements[i];	var name = element.name;
		if (typeof (name) === "undefined" || (name === null) || (name.length === 0)){continue;}
		var tagName = element.tagName;		
		if(tagName ==='INPUT'||tagName === 'TEXTAREA'){var type = element.type;
			if ((type === 'text')||(type === 'password') || (type === 'hidden') || (tagName === 'TEXTAREA')){
				sb.append("\""+name+"\":\""+encodeURIComponent(element.value.replace(/\r\n/ig,""))+"\"");
			}else if((type === 'checkbox') || (type === 'radio')){
				rcs.putOverride(name,type);
			}else{continue;}
		}else if (tagName === 'SELECT'){var oc = element.options.length;
			for ( var j = 0; j <oc; j++){
				if (element.options[j].selected){sb.append("\""+name+"\":\""+(element.value)+"\"");}
			}
		}
	}	
	if(rcs.size()>0){
		for(var i=0;i<rcs.size();i++){
		var r=rcs.element(i);var radio="";
			var d=document.getElementsByName(r.key);
			if(r.value==="radio"){
				for(j=0;j<d.length;j++){
					if(d[j].checked){radio=d[j].value;}
				}				
			}else{
				for(j=0;j<d.length;j++){
					if(d[j].checked){radio+=","+d[j].value;}
				}
				radio.substr(1);
			}
			sb.append("\""+r.key+"\":\""+radio+"\"");
		}
	}
	return "{"+sb.toJsonString()+"}";
}
  

 

### 分析与改进建议 #### 当前代码的问题: 1. **前端代码**:虽然已经使用了Vue.js和Axios进行了一些操作,但页面结构和交互逻辑不够清晰,尤其是缺少注册功能,并且代码风格不统一,部分HTML标签未闭合。 2. **后端代码**:`LoginManagement`类中的登录验证硬编码在内存中,没有实际连接数据库。此外,后端Servlet对JSON格式的支持可以更规范一些。 3. **会话管理**:当前仅使用了Session来存储用户的个人信息,但没有实现Application级别的用户共享信息。 4. **安全性**:存在SQL注入等安全风险(尽管当前无数据库),以及敏感信息如密码明文传输等问题。 #### 改进方案: ##### 前端改进: 1. **创建两个独立的HTML文件**:一个用于登录/注册(`login.html`),另一个用于展示个人信息(`person.html`)。 2. **完善Vue实例配置**:增加必要的生命周期钩子函数,优化用户体验。 3. **使用JSON字符串传递前后端数据**:确保前后端通信的数据格式一致。 ##### 后端改进: 1. **引入Jackson库**:便于将Java Bean转换JSON格式。 2. **调整`LoginManagement`类**:模拟数据库查询逻辑,避免硬编码。 3. **增强会话管理和应用级变量支持**:通过ServletContext设置全局共享变量。 4. **添加基本的安全措施**:比如输入校验、HTTPS协议等。 --- ### 修改后的完整代码示例 #### 前端代码 (`login.html`) ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>网上书店 - 登录/注册</title> <style> /* 样式保持不变 */ </style> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <div style="width: 1000px; margin: auto;" align="left"> <h2 align="center">网上书店</h2> <a href="javascript:void(0)" @click="toggleForm('login')">登录</a> | <a href="javascript:void(0)" @click="toggleForm('register')">注册</a> <!-- 登录表单 --> <form v-if="currentForm === 'login'" @submit.prevent="login" method="POST"> <input type="text" placeholder="请输入账号" v-model.trim="formData.username"/> <input type="password" placeholder="请输入密码" v-model.trim="formData.password"/> <button type="submit">登录</button> </form> <!-- 注册表单 --> <form v-if="currentForm === 'register'" @submit.prevent="register" method="POST"> <input type="text" placeholder="请输入新账号" v-model.trim="formData.newUsername"/> <input type="password" placeholder="请输入新密码" v-model.trim="formData.newPassword"/> <input type="password" placeholder="确认新密码" v-model.trim="formData.confirmPassword"/> <button type="submit">注册</button> </form> </div> </div> <script> const app = new Vue({ el: '#app', data() { return { currentForm: '', formData: {} }; }, methods: { toggleForm(formType) { this.currentForm = formType; }, async login() { try { let res = await axios.post('/LoginAjax', JSON.stringify(this.formData)); if(res.status === 200){ alert("登录成功"); window.location.href = '/person.html'; }else{ console.error("登录失败", res); } } catch(error){ console.error("网络请求出错:", error.message); } }, register(){ // 实现注册业务逻辑... } } }); </script> </body> </html> ``` #### 后端代码 (`LoginAjax.java`) ```java package servlet; import com.fasterxml.jackson.databind.ObjectMapper; import jakarta.servlet.*; import jakarta.servlet.annotation.WebServlet; import jakarta.servlet.http.*; import java.io.IOException; import java.util.HashMap; import java.util.Map; @WebServlet("/LoginAjax") public class LoginAjax extends HttpServlet { private final ObjectMapper mapper = new ObjectMapper(); protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("UTF-8"); resp.setContentType("application/json;charset=UTF-8"); StringBuilder jsonBuffer = new StringBuilder(); String line; while ((line = req.getReader().readLine()) != null) { jsonBuffer.append(line); } Map<String, Object> map = mapper.readValue(jsonBuffer.toString(), HashMap.class); HttpSession session = req.getSession(true); // 强制创建新的session ServletContext context = getServletContext(); if (service.LoginManagement.login(map.get("username").toString(), map.get("password").toString())) { session.setAttribute("userInfo", map.get("username")); synchronized (context) { Integer onlineCount = (Integer) context.getAttribute("onlineUserCount"); if (onlineCount == null) onlineCount = 0; context.setAttribute("onlineUserCount", ++onlineCount); } resp.getWriter().print(mapper.writeValueAsString(Map.of("status", "success"))); } else { resp.getWriter().print(mapper.writeValueAsString(Map.of("status", "failure"))); } } } ``` 以上是对提供的代码进行了重构以符合您的需求。注意这里只展示了关键性的改动点,完整的项目还需要考虑更多细节,例如异常处理、表单验证及样式美化等。另外,在真实环境中应尽量采用更安全的方式存储和传输密码信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值