在vue框架下通过ajxs向服务器传输数据并保存到数据库

在vue框架下通过ajxs向服务器传输数据并保存到数据库

—、首先需要在项目中导入这两个文件

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>

二、通过ajxs传输数据

function submitUser_Data(u_id,u_name,password) {
    		 $.ajax({
       	 	 type:'post',//方式
       		 url:'LoadDataServlet',//后台处理数据的地址
        		data:{action:"insert",u_id:u_id,u_name:u_name,password:password},//传输的数据
        		success: function(data){
        				//数据成功，插入数据库成功与否的返回值
            			switch (JSON.stringify(data)) {
                		case "0":document.getElementById("tip").innerHTML="信息录入成功";break;
                		case "1":document.getElementById("tip").innerHTML="信息录入失败";break;
                		default:break;
            			}
       		 	},
        		error: function(data){
            		alert("程序发生错误"+data);//数据发生错误
        		}
    		});
		 }   

这里数据传输的方式采用json文件，action 表示后台接收的动作，数据采用键：值的方式。

三、服务器.java代码

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		response.setCharacterEncoding("UTF-8");//输出都统一用UTF-8编码
		response.setContentType("text/json;charset=utf-8");//json文件采用UTF-8编码
		String action=request.getParameter("action");//接收前台传过来的动作
		if(action.equals("insert")){
			String[] user=new String[3];//接收数据的数组
			user[0]=request.getParameter("u_id");
			user[1]=request.getParameter("u_name");
			user[2]=request.getParameter("password");
			int flag=DBUtil.insert(user,insertFlag);//接受插入方法的返回值
			write(response,flag);
		}	
	}
	protected  void write(HttpServletResponse response,int a) throws ServletException, IOException {
		PrintWriter out = response.getWriter();//将文件输出到前台
		try {
			String json = JSONObject.toJSONString(a);//将插入方法的返回值写入
			out.write(json);
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			out.flush();
			out.close();
		}
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}

关于dopost()和doget()两个方法这里就不做详细的解释，需要了解的查看(https://www.cnblogs.com/justdoitba/articles/8058024.html)讲的很详细
接收到了传输过来的数据，接下来就要将数据存入数据库。
四、数据存入数据库
这个非常的简单，网上也有很多，只要按照流程就不会出错，接下来简单的说说

	public static Connection getConnection() throws Exception{
		Class.forName("com.mysql.jdbc.Driver");
		Connection con=DriverManager.getConnection
				(
						"jdbc:mysql://localhost/physical?useUnicode=true&characterEncoding=UTF-8",//链接数据库
						"root",//用户名
						"root"//密码
				);
		return con;
	}
	public static int insert(String[] info,int insertFlag){
		int flag=0;//	0插入成功，1插入失败
		try{
			//获取连接
			Connection con=getConnection();
			//创建查询
			Statement st=con.createStatement();
			//执行sql语句
			String o=info[0];
			ResultSet rs=st.executeQuery("select u_name from ui_table where u_id = '"+info[0]+"' ;");
			if(rs.next()){
			st.executeUpdate("insert into ui_table values ("+info[0]+",'"+info[1]+"','"+info[2]+"');");
			}
			rs.close();
			st.close();
			con.close();
		}
		catch(Exception e)
		{
			flag=2;
			e.printStackTrace();
			return flag;
		}
		return flag;
	}

需要注意的是getConnection() 方法连接数据库时要将数据库名改成自己的，笔者这里用的是physical，用户名和密码也改成自己的。
五、总结
笔者这里只进行了插入操作，其它的更新、删除操作按照此方法照做就行了。小白第一次写博客，有哪些地方写的不好的也请各位读者谅解。
生活不只有诗和远方，还有面包和牛奶。