关于AJAX的介绍：https://blog.csdn.net/qq_40302790/article/details/97925646

AJAX的局部刷新不仅减轻了浏览器的负担，而且改善了用户对web应用的体验效果。

下面利用AJAX来实现常用的功能操作。
1、前台页面手机号合法性验证（GET方式）

<input type="text" id="phone" autocomplete="off" placeholder="输入手机号...">
	<span id="span"></span>

document.getElementById("phone").onblur = function() {
		var ajax = getAJAX();
		var phone = this.value;
		var url = "${pageContext.request.contextPath}/CheckPhone?phone=" + phone + "&time=" + new Date().getTime();// time的作用是防止缓存
		ajax.open("GET", url);
		ajax.send(null);
		ajax.onreadystatechange = function() {
			if (ajax.readyState == 4 && ajax.status == 200) {
				document.getElementById("span").innerHTML = ajax.responseText;
			}
		}
	}

@WebServlet(urlPatterns="/CheckPhone")
public class CheckPhoneServlet extends HttpServlet {
	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8"); 
		String phone = request.getParameter("phone").trim();
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		final String regex = "1[34578]\\d{9}";
		if("".equals(phone)) {
			out.write("<font size='6' color='red'>请输入手机号</font>");
		}else if(phone.matches(regex)) {
			out.write("<font size='6' color='green'>手机号合法</font>");
		}else {
			out.write("<font size='6' color='red'>手机号不合法</font>");
		}
		out.flush();
		out.close();
	}
}

2、省市下拉框的二级联动（POST方式）

<select id="province" onchange="getCities(this)">
		<option>省份</option>
		<option>四川</option>
		<option>浙江</option>
		<option>湖南</option>
		<option>湖北</option>
</select>
<select id="city"><option>城市</option></select>

function getCities(select) {
		var cityElement = document.getElementById("city");
		cityElement.length = 1;
		var province = select.options[select.selectedIndex].value;
		if ("省份" == province) {
			return;
		}
		var ajax = getAJAX();
		var url = "${pageContext.request.contextPath}/GetCities?" + new Date().getTime();
		ajax.open("POST", url); // 会自动将请求体的汉字进行utf-8编码
		ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded"); // 设置请求头
		ajax.send("province=" + province);
		ajax.onreadystatechange = function() {
			if (ajax.readyState == 4 && ajax.status == 200) {
				var xml = ajax.responseXML;
				var cityArray = xml.getElementsByTagName("city");
				for (var i = 0; i < cityArray.length; i++) {
					var city = cityArray[i].firstChild.nodeValue;
					var option = document.createElement("option");
					option.innerHTML = city;
					cityElement.append(option);
				}
			}
		}
	}

@WebServlet(urlPatterns="/GetCities")
public class GetCitiesServlet extends HttpServlet {

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8"); 
		String province = request.getParameter("province");
		response.setContentType("text/xml;charset=utf-8");//注意是text/xml
		PrintWriter out = response.getWriter();
		out.write("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
		out.write("<root>");
		switch (province) {
		case "四川":
			out.write("<city>成都</city>");
			out.write("<city>攀枝花</city>");
			out.write("<city>九寨沟</city>");
			out.write("<city>绵阳</city>");
			break;
		case "浙江":
			out.write("<city>杭州</city>");
			out.write("<city>宁波</city>");
			out.write("<city>绍兴</city>");
			out.write("<city>温州</city>");
			break;
		case "湖南":
			out.write("<city>长沙</city>");
			out.write("<city>株洲</city>");
			out.write("<city>湘潭</city>");
			out.write("<city>衡阳</city>");
			break;
		case "湖北":
			out.write("<city>武汉</city>");
			out.write("<city>恩施</city>");
			out.write("<city>赤壁</city>");
			out.write("<city>黄冈</city>");
			break;
		}
		out.write("</root>");
		out.flush();
		out.close();
	}
}

       在实现动态生成下拉框数据的时候接触到了一个好用的js插件chosen.jquery.js，但是在使用的过程中发现在浏览器中是好用的，能够完美的实现功能，浏览器端界面如下图所示：



但是在做微信工众号的时候发现这个插件不能显示输入文本框：



各种查资料都没有发现怎么适配手机端，githup上插件文档好像也是介绍已经禁止在android和ip（ad/phone）使用：



但是他是在哪禁用的选择？能不能把选择禁用的去掉，于是看了js的源码，找到了禁用的部分，原代码判断如果是iP(od|hone)，Android，就返回false，现在只要把false改为true就可以了。如果介绍错误希望大佬们多多指正。



 

 

 

第一次使用react，初级问题比较多 
代码：
<Input className="search-input" type="text" name="search" placeholder="请输入好友姓名/手机号" value={this.state.searchValue} onChange={this.handleChange}/>
 handleChange(e){
   this.setState({
     searchValue: e.target.value
    });
   console.log(this.state.searchValue)
}
this.state = {
  searchValue: "",
 };
 this.handleChange = this.handleChange.bind(this);
拿到的值：
为什么？
react input，并不会立即刷新状态树
setState是异步操作，不能马上拿到state的值，可以在回调中拿到
我点击搜索时，打印出来的时更新的state值就是本次输入的值
在setState回调中拿到值

	

1
用户登录
1.1 企业统一信用代码登录
　　打开浏览器，在地址栏输入网址http://yw.zjsei.com:8045/login.jsp， 进入登录界面，已有账号的用户，可以直接输入用户名、密码、验证码直接登录系统。
　　企业登录账户统一用企业统一信用代码，密码默认：Abc12345。
登陆界面
1.2 手机号码登录
　　用户也可以通过绑定的手机号码，获取短信验证码，登陆系统。(用户的手机号码，需在首次登陆的时候，进行绑定。)
登陆界面
2
首页
2.1
　　登录成功后，进入首页，企业需进行手机验证激活。如图：
2.2
　　输入手机号码、手机验证码、单位联系人；输入正确的信息，点击【确认】按钮，手机验证通过后进入主页，如图：
　　首页主要包括：三项制度的重大隐患数、评价等级标准、评价等级、检验到期与超期未检、消息提醒、通知公告。
三项制度：统计八类特种设备的重大隐患数；
评价等级标准：关于特种设备使用安全管理分类评价的等级标准；
检验到期：关于特种设备下次的检验进行提前提醒；
超期未检：关于特种设备检验未按时检验进行提醒；
消息提醒：主要包括分类评价未评价的，超期未评的，重大隐患未整改的；
通知公告：主要展示监管部门发给企业相关的通知与公告。
3
基本信息
3.1 企业信息
　　点击二级菜单【企业信息】，进入企业信息页面，主要展示企业的基本信息。如图：
　　点击【基本信息修改】，可对联系人、电话、邮箱、传真进行修改，如图：
　　点击【手机号码修改】，可以变更手机号码，需通过新手机号码验证，如图：
3.2 设备信息
　　点击二级菜单【设备信息】，进入设备信息页面，展示企业的所有特种设备，如图：
　　在查询页面中输入查询条件，查询字段包括：设备代码、注册代码、设备种类(下拉框)、区域代码(点击选择按钮)、使用状态(下拉框)、风险等级(下拉框)、检验状态(下拉框)；查询条件确认后，点击【查询】按钮，列表中显示查询结果，如图：
　　查看：点击列表中的【查看】按钮，可查看设备的基本信息、扩展信息、检验信息、评价信息，以及该设备的整改状态。如图：
3.3 检验信息
　　点击二级菜单【检验信息】，进入检验信息页面，展示特种设备的检验信息，如图：
　　在查询页面中输入查询条件，查询字段包括：设备种类(下拉框)、注册代码、检验日期(时间段)、下次检验日期(时间段)、报告书编号；查询条件确认后，点击【查询】按钮，列表中显示查询结果，如图：
　　查看：点击列表中的【查看】按钮，可查看检验信息的详细情况，如图：
4
分类评价
4.1 企业自评
　　点击菜单【分类评价】-【企业自评】，进入企业自评页面，展示企业自评结果，如图：
　　在查询页面中输入查询条件，查询字段包括：否决项(下拉框)、评价结果、上报情况(下拉框)、评估日期(时间段)；查询条件确认后，点击查询，查询列表中显示统计结果。
修改：点击【修改】按钮，可修改企业自评的结果 ，修改后需重新生成评价报告。
上报：点击【上报】按钮，可对企业自评的结果进行上报给监管部门。
查看：点击【查看】按钮，可查看企业自评的结果，包括否决项、单位评价、设备评价、评价报告、存在问题，风险隐患。
企业自评业务流程-新增
1
抽查特种设备
 
　　根据《特种设备使用安全管理分类评价规范》的抽查规则，抽取相应数量的特种设备(系统自动实现)，如图：
2
填写否决项、单位评价、设备评价
 
　　抽取设备【确认】后，开始对单位情况、特种设备进行评价，如图：
评价内容主要包括：
否决项、单位评价、设备评价。
1)否决项填写：评价单位、评价日期、组长、组员、评价人员，以及6项否决项，如图。
2)单位评价填写：切换到【单位评价】页面，填写扣分以及存在问题、评价日期、评价人员，如图。
3)设备评价填写：切换到【设备评价】页面，选择特种设备，点击【评价】按钮，弹出一个设备评价表，根据《特种设备使用安全管理分类评价规范》，不同类型的特种设备评价内容有区别，如图(电梯)：
4)关于设备的选择：可通过增加设备、手动增加设备两种方式进行增加。
    a)点击【增加设备】，增加评价设备，通过设备类型(机电类、承压类)、设备风险等级选择随机抽取设备；如图：
    b)若选择固定的设备评价，点击【手动增加设备】，进行选择设备，进行评价。
3
生成评价报告
 
　　关于否决项、单位评价、设备评价等内容填写完成后，点击【生成报告】自动生成报告，切换到【评价报告】页面，可查看整个评价情况，如图：
　　同时可切换到【存在问题】页面，可查看企业、设备存在的问题，如图：
4
上报
 
　　在上报之前，评价内容存在问题都可进行修改，点击【修改】按钮，修改后点击【保存】，评价报告需重新再生成一次，点击【生成报告】，确认没问题后，点击【确认上报】。
5
报告打印
 
　　企业自评上报后，可对企业自评情况、设备评价情况、以及报告以Word形式下载。
4.2 监管评价
　　点击二级菜单【监管评价】，进入监管评价页面，页面中展示的是监管部门对本企业验证性评价的内容。
　　在查询页面中输入查询条件，查询字段包括：否决项、评价结果；查询条件确认后，点击查询，列表中显示查询结果，如图：
详情：点击列表中的【详情】按钮，可查看监管部门对本企业的评价结果，包括否决项、单位评价、设备评价、评价报告、存在问题，风险隐患以及报告下载。
4.3 整改管理
　　点击二级菜单【整改管理】，进入整改管理页面，页面中展示企业对自身以及设备评价后存在的一些风险隐患，需及时整改处理。
　　在查询页面中输入查询条件，查询字段包括：类型(下拉框)、计划整改时间(时间段)、整改时间(时间段)整改状态；查询条件确认后，点击查询，列表中显示查询结果，如图：
整改计划：在列表中，选中一条内容，点击【整改计划】，如图：
　　填写计划时间、整改措施；点击【保存】，整改计划已填写完成。
整改结果确认：在列表中，选中一条内容，点击【整改结果确认】，如图：
　　填写整改时间、以及整改状态，点击【保存】，这条风险隐患已确认完成。
5
通知公告
　　点击一级菜单【通知公告】，进入通知公告页面，页面中展示与本企业相关的通知与公告内容。
　　在查询页面中输入查询条件，查询字段包括：标题、发布日期(时间段)；查询条件确认后，点击查询，查询列表中显示统计结果，点击【查看】按钮，可看详情。
登录后可自行右上角下载
或点击原文获取
分类评价系统操作手册