自己前端开发中遇到的问题及解决方法

1. 前端做登录注册时提交按钮问题
   在用ajax传数据给后端时，通常给button按钮绑定js事件

<form class="form-horizontal">
	<div class="form-group">
		<!-- <label for="logname" class="col-sm-2 control-label">账号</label> -->
		<div class="col-sm-12">
			<input type="text" class="form-control logname" name="logname" placeholder="输入账号">
		</div>
	</div>
	<div class="form-group">
		<!-- <label for="logpw" class="col-sm-2 control-label">密码</label> -->
		<div class="col-sm-12">
			<input type="password" class="form-control logpw" name="logpw" placeholder="输入密码">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-12">
			<button type="button" id="submit" class="btn btn-primary">登陆</button>
		</div>
	</div>
</form>
<button type="button" id="reg-link" class="btn btn-link">注册</button>

$("#submit").click(function() {
	var logname = $(".logname").val();
	var logpw = $(".logpw").val();
	console.log('ajax');
	$.ajax({
		url: '/process',
		type: 'post',
		dataType: 'json',
		data: {
				logname: logname,
				pw: logpw
			  },
		success : function(data, status){
			if (data == 0){
				$('.title').text('账号或密码错误');
			}
			else {
				console.log(data[0]);
				window.location.href = "http://127.0.0.1:8888/homepage";
			}
		}
	});
});

这里如果button按钮没有设置type=button的话当点击提交数据时会导致提交数据的时候页面刷新，从而在success里面设置的页面跳转失败，即直接停留在当前页面

2. ajax传输给nodejs后台数据时的数据类型问题
   这里数据库用的是mongodb
   当我在前端input填入信息并提交，用post的方法传入nodejs后台的时候，传入的参数均是字符串string类型，例如abcd、abcd123、1234567等数据均为string类型，这就导致了当我直接在后台拿这些数据去跟数据库比对的时候，abcd和abcd123这两种可以比对成功，而1234567这样的纯数字字符串则比对失败。

var user_name = req.body.logname;
var password = req.body.pw;

MongoClient.connect(url, {useNewUrlParser:true}, function(err, db){
	if (err) throw err;
	var dbo = db.db('student')
	var whereStr = {'admin': user_name, 'pw': password}//查询条件
	dbo.collection('class1').find(whereStr).toArray(function(err, res){
		if (err) throw err;
		//console.log(res[0]['admin']);
		if (res != ''){
			console.log('登陆成功');
			console.log(res);
			response.send(JSON.stringify(res));
			// response.status(200).send(res);
			response.end();
		}
		else{
			console.log('账号或密码错误');
			response.send("0");
			response.end();
		}
		db.close();
	})
})

像这样，直接用req.body.logname拿到的post参数去跟数据库比对
所以，当传入的参数是纯数字的String类型时，应该讲该字符串转为Number类型，再将数据和数据库进行比对

if (!isNaN(user_name)){ //如果传过来的数据是纯数字的字符串
	user_name = parseInt(user_name); //将数据转为数字类型
}
if (!isNaN(password)){
	password = parseInt(password);
}

3. 用isNaN判断数据是否是非数字值，是则true，不是则false
   （另加一个很好用的数据类型判断方法，typeof()，typeof(‘abc’)返回String）

4. 前端数据可以用json格式的文件来保存，然后再JavaScript中用$.getJSON 或 ajax方法的 $.get来获取json数据，但是使用$.getJSON方法会直接暴露文件所在的位置，这种方法安全性不高，可以使用ajax的get方法来获取服务器中的json文件

$.getJSON('/json/info.json', function(data){
	$.each(data, function(index, info) {
		$(".name:eq(" + index + ")").text(info.name);
		$(".country:eq(" + index + ")").text(info.country);
		$(".club:eq(" + index + ")").text(info.club);
		$(".pic:eq(" + index + ")").attr('src',info.picture);
	});
})

$.get("/getinfo", function(data){
	$.each(data, function(index, info){
		$(".name:eq(" + index + ")").text(info.name);
		$(".country:eq(" + index + ")").text(info.country);
		$(".club:eq(" + index + ")").text(info.club);
		$(".pic:eq(" + index + ")").attr('src',info.picture);
	})
})

5. 表单中可以在form标签上添加 onsubmit = "return false" 来防止回车后页面刷新