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);