A. jquery或js前端提交数据的几种方式
1.jquery提交数据的方式：
（1）第一种jquery序列化提交数据方式：
通过id获取的form表单元素.serialize();
（2）第二种模拟form表单提交元素：
$('#form表单id').attr('method','post');
$('#form表单id'').find('input[name="type"]').val(test);
$('#form表单id').find('input[name="dfrom_to1"]').val(dfrom_to);
$('#form表单id').find('input[name="gt_road_new"]').val(gt_road);
$('#form表id').attr('action',AdminLTE.ctx+'/moles/ltegt/findAllCoverAndInterfere.do');
$('#analysisForm').submit();
2.js提交数据的方式：
(1).js提交表单( .submit()方法提交表单 )
function doSearch(){
var action ="<%=path%>/User_queryAllUser";
document.all.form.action = action;
document.all.form.submit();}
(2).js替代超链接( window.location.href )
<input type="button" id="modify" value="修改工号" οnclick="modifyEmp(${ myList.employeeId })">
//js不能起名为modify，为敏感关键字
function modifyEmp( employeeId ){
//employeeId 作为js的参数传递进来
window.location.href = '<%=path%>/User_openUserUpdate?employeeId='+employeeId;
B. jsp做登录,注册页面 数据库
jsp登录注册页面都需要查询和插入数据库的，还要检查注册信息存不存在。
完整例子如下：
用户信息的bean：
package chen;
public class UserBean
{
private String userid;
private String password;
public void setUserId(String userid)
{
this.userid=userid;
}
public void setPassword(String password)
{
this.password=password;
}
public String getUserId()
{
return this.userid;
}
public String getPassword()
{
return this.password;
}
}
提交数据库的bean：
package chen;
import com.mysql.jdbc.Driver;
import java.sql.*;
public class UserRegister
{
private UserBean userBean;
private Connection con;
//获得数据库连接。
public UserRegister()
{
String url="jdbc:mysql://localhost/"+"chao"+"?user="+"root"+"&password="+"850629";
try
{
Class.forName("com.mysql.jdbc.Driver").newInstance();
con = DriverManager.getConnection(url);
}
catch(Exception e)
{
e.printStackTrace();
}
}
//设置待注册的用户信息。
public void setUserBean(UserBean userBean)
{
this.userBean=userBean;
}
//进行注册
public void regist() throws Exception
{
String reg="insert into userinfo(userid,password) values(?,?)";
try
{
PreparedStatement pstmt=con.prepareStatement(reg);
pstmt.setString(1,userBean.getUserId());
pstmt.setString(2,userBean.getPassword());
pstmt.executeUpdate();
}
catch(Exception e)
{
e.printStackTrace();
throw e;
}
}
}
提交注册数据进入数据库：
<%@ page contentType="text/html;charset=gb2312" pageEncoding="gb2312"
import="chen.*" %>
<jsp:useBean id="userBean" class="chen.UserBean" scope="request">
<jsp:setProperty name="userBean" property="*"/>
</jsp:useBean>
<jsp:useBean id="regist" class="chen.UserRegister" scope="request"/>
<html>
<head>
<title> 用户信息注册页面</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<%
String userid =request.getParameter("userid");
String password = request.getParameter("password");
userBean.setUserId(userid);
userBean.setPassword(password);
System.out.println(userid+password);
%>
<% try{
regist.setUserBean(userBean);
out.println(userid);
regist.regist();
out.println("注册成功");}
catch(Exception e){
out.println(e.getMessage());
}
%>
<br>
<a href="login.jsp">返回</a>
</body>
</html>
登陆验证页面：
<%@page import="java.sql.*" contentType="text/html;charset=GB2312" %>
<%@page import="java.util.*"%>
<%
String userid1=new String(request.getParameter("userid"));
String password1=new String(request.getParameter("password"));
Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/chao","root","850629");
Statement stmt=con.createStatement();
String sql="select * from userinfo where userid='"+userid1+"';";
ResultSet rs=stmt.executeQuery(sql);
if(rs.next())
{String password=new String(rs.getString("password"));
if(password.equals(password1))
{session.setAttribute("userid1",userid1);
response.sendRedirect("sucess.jsp");
}
else
{response.sendRedirect("login.jsp");
}
}
else
{response.sendRedirect("login.jsp");
}
%>
登陆页面：
<%@ page contentType="text/html; charset=gb2312" %>
<html>
<body>
<form method="get" action="checklogin.jsp">
<table>
<tr><td> 输入用户名：</td>
<td><input type=text name=userid ></td>
</tr>
<tr><td>输入密码：</td>
<td><input type=password name=password></td>
</tr>
<tr><td><input type=submit value=确认>
</td></tr>
</table>
</form>
<form action="register.jsp">
<input type=submit value=注册>
</form>
</body>
</html>
注册页面：
<%@page contentType="text/html; charset=gb2312" language="java" import="java.util.*,java.io.*"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<center>
<h1>注册新用户</h1>
<form action="adser.jsp" method=post>
<table border="1" bgcolor="#0099CC">
<tr>
<td> 用户名:
<input type="text" name="userid">
</td>
</tr>
<tr valign="middle">
<td> 密码：
<input type="password" name="password" readonly>
</td>
</tr>
<tr>
<td>
<input type=submit value=提交>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
登陆成功页面：
<%@page import="java.util.*" contentType="text/html; charset=gb2312" %>
<%@include file="trans.jsp"%>
<html>
<head>
<title>
sucess
</title>
</head>
<body bgcolor="#ffffff">
<h1>
登录成功，欢迎您！
</h1><%=trans(session.getAttribute("userid1"))%>
</body>
</html>
C. vue实现登陆注册功能（小白篇）
在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：
1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码
2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token
3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面
4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面
5、每次调后端接口，都要在请求头中加token
6、后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401
7、如果前端拿到状态码为401，就清除token信息并跳转到登录页面
vue-cli搭建一个项目，简单说明前端要做的事：
一、调登录接口成功，在回调函数中将token存储到localStorage和vuex中
login.vue
<template>
<div>
<input type="text" v-model="loginForm.username" placeholder="用户名"/>
<input type="text" v-model="loginForm.password" placeholder="密码"/>
<button @click="login">登录</button>
</div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
data () {
return {
loginForm: {
username: '',
password: ''
}
};
},
methods: {
...mapMutations(['changeLogin']),
login () {
let _this = this;
if (this.loginForm.username === '' || this.loginForm.password === '') {
alert('账号或密码不能为空');
} else {
this.axios({
method: 'post',
url: '/user/login',
data: _this.loginForm
}).then(res => {
console.log(res.data);
_this.userToken = 'Bearer ' + res.data.data.body.token;
// 将用户token保存到vuex中
_this.changeLogin({ Authorization: _this.userToken });
_this.$router.push('/home');
alert('登陆成功');
}).catch(error => {
alert('账号或密码错误');
console.log(error);
});
}
}
}
}
</script>
store文件夹下的index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
// 存储token
Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''
},
mutations: {
// 修改token，并将token存入localStorage
changeLogin (state, user) {
state.Authorization = user.Authorization;
localStorage.setItem('Authorization', user.Authorization);
}
}
});
export default store;
二、路由导航守卫
router文件夹下的index.js
import Vue from 'vue';
import Router from 'vue-router';
import login from '@/components/login';
import home from '@/components/home';
Vue.use(Router);
const router = new Router({
routes: [
{
path: '/',
redirect: '/login'
},
{
path: '/login',
name: 'login',
component: login
},
{
path: '/home',
name: 'home',
component: home
}
]
});
// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => {
if (to.path === '/login') {
next();
} else {
let token = localStorage.getItem('Authorization');
if (token === 'null' || token === '') {
next('/login');
} else {
next();
}
}
});
export default router;
三、请求头加token
// 添加请求拦截器，在请求头中加token
axios.interceptors.request.use(
config => {
if (localStorage.getItem('Authorization')) {
config.headers.Authorization = localStorage.getItem('Authorization');
}
return config;
},
error => {
return Promise.reject(error);
});
四、如果前端拿到状态码为401，就清除token信息并跳转到登录页面
localStorage.removeItem('Authorization');
this.$router.push('/login');
D. 点注册按钮会到一个function中判断，信息正确跳转到登录页面。那注册的信息如何提交到后台数据库
前端调用后端接口, 向后端传送用户提交的数据
E. 前端数据提交问题
前端可以让用户通过typeName选择，但提交数据时必须是id，否则如果有同名的typeName后台是绝对无法区分的，即使是上帝也没办法。
比如前端是用下拉框来选择userType的，那么可以这样：
<select name="userType">
<option value="这里放id">这里放typeName</option>
<option value="这里放id">这里放typeName</option>
......
</select>
这样的话用户选择时看到的是typeName，但上传时则是id
F. web前端如何做注册页面
样式+JS
要不然你怎么做？？？？
G. web前端开发页面的注册怎么实现
写个表单，一个提交按钮，点击按钮就调用js的函数用ajax把值传到后台~
H. 前端注册页面
表单验证 this.$refs[formName].validate()
使用此方法前检查prop一定必须要写在上面，写在里面的input上或者其他任何地方都不行（el-form-item prop属性绑定）
userForm是form的ref属性
//<el-form :model="modelInfo" :rules="rules" ref="userForm">
I. 网页怎么实现用户注册
先不要着急动态网页，把html学好再说。目前网页编程分为动态和静态，静态是html，以及像vbscript，javascript的脚本，动态是在以上基础上还包含asp或php代码，如果你是单纯想做个登陆程序也不是很难，照葫芦画瓢。
如果你要正经学动态网页的话，首先要学html（使用流行的div+css）和以及使用脚本代码（不一定要会编写），同时由于flash盛行，想做好的网页，flash必学，接着进军动态网页。
你可以想象，一个可以注册登陆的的网站，肯定是需要数据库的，就算是简单access，所以你要能管理假单的数据库，若网站做大了，数据大了，比如像腾讯，那么access就不能用了，必须学SQL,SQL就是比较专业的了，厚厚的一本书。同时既然有用户，那么用户的资料，尤其密码就需要绝对保密，于是MD5加密就是不得不涉及了。同是网站防挂马等等。
然后asp和php就是动态网页，两个都要学，php前景比asp稍好些，但也比asp难些。
上面说的是正式网站，可运营的。
如果仅仅是试试的话，首先不需要acces，可以用txt文件来存取密码，就像vb一样。不存在网站结构，所以不需要用css+div，使用简单的表单就可以实现。另外你只需要登陆程序，那么基本结构就是：数据，动态代码部分，html部分。为尽可能简洁，可以不使用脚本实现页面特效。
1，html。对于登陆程序，表单必须学习。
2，数据，建立一个空白txt文件。
3，动态部分。asp和php各不一样。但是工作原理可以说一下，
输入数据（在表单中输入）
当点击注册按钮时，html的表单form会提交数据指定的asp页面（这部分属于html代码），asp执行——1，接收表单数据，生成一个html页面，里面动态生成你刚注册的用户名。一般是欢迎光临的页面。2，将数据发送到txt文件里保存下来。
如果点登陆，动态代码执行——将用户名密码核对，成功后生成欢迎再次光临页面（这样的页面就是asp或php页面），否则，回到原页面（静态html）。
而且一旦登陆成功，用户访问的页面几乎全部都是asp或php文件。同时，浏览到的个人信息都要与数据库挂钩。
这是一些通俗解释，做个动态网不是那么简单的。你只是看着简单，很多网站都有个，但想自己做就不容易了。一般网页都是托专门的网站制作公司做的，你以为那些什么论坛都是自己做的吗？很多论坛图标都一样，因为全是一个版本的，只是把原来的一些版权东西替换成自己的了。其实你也可以去下载代码，也可以用的。
不过提醒一下，动态网站在自己pc上运行是要安装iss组件，这是和静态网站的区别。没装ISS，asp是没法实现动态运行的，比如，你做的一套本地asp程序（数据库什么都有），可以IE预览看到登陆界面，但是你绝对登陆不上。
J. 前端 注册页面 当输入框失去鼠标点击焦点时，边框红框显示
function checkUsername() {
//1.获取用户名值
var username =$("#username").val();
//2.定义正则
var reg_username =/^\w{8,20}$/;
//3.判断，给出提示信息
var flag =reg_username.test(username);
if(flag){
//用户名合法
$("#username").css("border","");
}else{
//用户名非法,加一个红色边框
$("#username").css("border","1px solid red");
}
return flag;
$("#username").blur(checkUsername);