Java Web視頻講義例子PPT表單自動(dòng)提交和ajax方式提交，serializeArray()【詩書畫唱】
概述
一般就是用submit。
自動(dòng)提交方式START
自動(dòng)提交方式END
js手動(dòng)提交START
js手動(dòng)提交END
Ajax提交（不會(huì)頁面跳轉(zhuǎn)版，會(huì)把界面的代碼全放在data中）START
如果想界面跳轉(zhuǎn)就：
當(dāng)然也可以用id，val等：
Ajax提交（不會(huì)頁面跳轉(zhuǎn)版）END
PPT? ?START
使用表單序列化方法serialize()，會(huì)智能的獲取指定表單內(nèi)的所有元素。這樣，在面對(duì)大量表單元素時(shí)，會(huì)把表單元素內(nèi)容序列化為字符串，然后再使用 Ajax 請(qǐng)求
除了serialize()方法，還有一個(gè)可以返回 JSON 數(shù)據(jù)的方法：.serializeArray()。這個(gè)方法可以直接把數(shù)據(jù)整合成鍵值對(duì)的 JSON 對(duì)象。
PPT? ?END
講義 START
表單提交：
1、有頁面刷新的（自動(dòng)）提交（有頁面跳轉(zhuǎn)）和ajax提交（沒有頁面刷新）
2、表單傳參方式
3、表單驗(yàn)證
type="submit"方式提交，自動(dòng)提交有頁面刷新
type="button"綁定一個(gè)點(diǎn)擊事件提交，手動(dòng)提交，可能有頁面刷新，也可能沒有頁面刷新
ajax提交方式?jīng)]有頁面刷新
講義 END
例子 START
package com.jy.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
?* Servlet implementation class LoginServlet
?*/
@WebServlet("/ls")
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
? ? ? ?
? ? /**
? ? ?* @see HttpServlet#HttpServlet()
? ? ?*/
? ? public LoginServlet() {
? ? ? ? super();
? ? ? ? // TODO Auto-generated constructor stub
? ? }
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
this.doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("utf-8");
String act = request.getParameter("act");
String pwd = request.getParameter("pwd");
System.out.println("賬號(hào)是：" + act + ",密碼是：" + pwd);
String flag = request.getParameter("flag");
System.out.println(flag);
request.getRequestDispatcher("manage.jsp")
? ? .forward(request, response);
//查詢出了商品的信息
//蘋果，6.5，紅富士，橙子，5.5，臍橙
//response.getWriter().write("Hello world");
}
}
submit自動(dòng)提交START
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
? ? String path = request.getContextPath();
? ? String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? ? <head>
? ? ? ? <base hreff="<%=basePath%>">
? ? ? ? <title></title>
? ? ? ? <meta http-equiv="pragma" content="no-cache">
? ? ? ? <meta http-equiv="cache-control" content="no-cache">
? ? ? ? <meta http-equiv="expires" content="0">
? ? ? ? <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
? ? ? ? <meta http-equiv="description" content="This is my page">
? ? ? ? <style type="text/css">
? ? ? ? ? ? * {
? ? ? ? ? ? ? ? font-size: 30px;
? ? ? ? ? ? }
? ? ? ? </style>
? ? ? ? <script type="text/javascript">
? ? ? ? ? ? function doCheck(){
? ? ? ? ? ? var flag = true;
? ? ? ? ? ? //驗(yàn)證時(shí)修改flag的值來確定是否執(zhí)行提交的servlet
? ? ? ? ? ? var act = document.getElementById('act').value;
? ? ? ? ? ? var len = act.length;
? ? ? ? ? ? if(len > 30 || len < 6) {
? ? ? ? ? ? flag = false;
? ? ? ? ? ? alert('賬號(hào)的長度必須在6到30位之間');
? ? ? ? ? ? }
? ? ? ? ? ? return flag;
? ? ? ? ? ? }
? ? ? ? </script>
? ? </head>
? ? <body>
? ? ? ? <form action="ls?flag=false" method="post" onsubmit="return doCheck();">
? ? ? ? ? ? <label>賬號(hào)：</label>
? ? ? ? ? ? <input type="text" name="act" id="act"/>
? ? ? ? ? ? <br>
? ? ? ? ? ? <label>密碼：</label>
? ? ? ? ? ? <input type="password" name="pwd" id="pwd"/>
? ? ? ? ? ? <br>
? ? ? ? ? ? <input type="submit" value="提交" />
? ? ? ? </form>?
? ? </body>
</html>
submit自動(dòng)提交END
手動(dòng)表單提交START
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
? ? String path = request.getContextPath();
? ? String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? ? <head>
? ? ? ? <base hreff="<%=basePath%>">
? ? ? ? <title></title>
? ? ? ? <meta http-equiv="pragma" content="no-cache">
? ? ? ? <meta http-equiv="cache-control" content="no-cache">
? ? ? ? <meta http-equiv="expires" content="0">
? ? ? ? <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
? ? ? ? <meta http-equiv="description" content="This is my page">
? ? ? ? <style type="text/css">
? ? ? ? ? ? * {
? ? ? ? ? ? ? ? font-size: 30px;
? ? ? ? ? ? }
? ? ? ? </style>
? ? ? ? <script type="text/javascript">
? ? ? ? ? ? function doSb(){
? ? ? ? ? ? //alert('手動(dòng)表單提交');
? ? ? ? ? ? //設(shè)置表單的提交路徑
? ? ? ? ? ? //document.getElementById('myForm').action = 'ls';
? ? ? ? ? ? //提交表單
? ? ? ? ? ? if(doCheck()) {
? ? ? ? ? ? document.getElementById('myForm').submit();
? ? ? ? ? ? }? ? ? ? ?
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ? function doCheck(){
? ? ? ? ? ? var flag = true;
? ? ? ? ? ? //驗(yàn)證時(shí)修改flag的值來確定是否執(zhí)行提交的servlet
? ? ? ? ? ? var act = document.getElementById('act').value;
? ? ? ? ? ? var len = act.length;
? ? ? ? ? ? if(len > 30 || len < 6) {
? ? ? ? ? ? flag = false;
? ? ? ? ? ? alert('賬號(hào)的長度必須在6到30位之間');
? ? ? ? ? ? }
? ? ? ? ? ? return flag;
? ? ? ? ? ? }
? ? ? ? </script>
? ? </head>
? ? <body>
? ? ? ? <form id="myForm" action="ls?flag=true" method="post">
? ? ? ? ? ? <label>賬號(hào)：</label>
? ? ? ? ? ? <input type="text" name="act" id="act" />
? ? ? ? ? ? <br>
? ? ? ? ? ? <label>密碼：</label>
? ? ? ? ? ? <input type="password" name="pwd" id="pwd"/>
? ? ? ? ? ? <br>
? ? ? ? ? ? <input type="button" value="提交" onclick="doSb();" />
? ? ? ? </form>?
? ? </body>
</html>
手動(dòng)表單提交END
Ajax提交START
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
? ? String path = request.getContextPath();
? ? String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? ? <head>
? ? ? ? <base hreff="<%=basePath%>">
? ? ? ? <title></title>
? ? ? ? <meta http-equiv="pragma" content="no-cache">
? ? ? ? <meta http-equiv="cache-control" content="no-cache">
? ? ? ? <meta http-equiv="expires" content="0">
? ? ? ? <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
? ? ? ? <meta http-equiv="description" content="This is my page">
? ? ? ? <style type="text/css">
? ? ? ? ? ? * {
? ? ? ? ? ? ? ? font-size: 30px;
? ? ? ? ? ? }
? ? ? ? </style>
? ? ? ? <script type="text/javascript" srcc="js/jquery-1.11.0.js"></script>
? ? ? ? <script type="text/javascript">
? ? ? ? ? ? function doAjax(){
? ? ? ? ? ? //獲取輸入的賬號(hào)和密碼
? ? ? ? ? ? //var a = $('#act').val();
? ? ? ? ? ? //var p = $('#pwd').val();
? ? ? ? ? ? if(doCheck()){
? ? ? ? ? ? //方法1：
? ? ? ? ? ? ? ? //var ps = $('#frm').serialize();
? ? ? ? ? ? ? ? //方法2:
? ? ? ? ? ? ? ? ? ? //獲取表單中的所有屬性，并且封裝在obj對(duì)象中
? ? ? ? ? ? ? ? ? ? //[{"name":"act","value":"admin"},{"name":"pwd","value":"123"}]
? ? ? ? ? ? ? ? var arr = $('#frm').serializeArray();
? ? ? ? ? ? ? ? var params = {};
? ? ? ? ? ? ? ? for(var i = 0;i < arr.length;i ++) {
? ? ? ? ? ? ? ? var attr = arr[i];
? ? ? ? ? ? ? ? params[attr.name] = attr.value;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? //提交一個(gè)ajax請(qǐng)求
? ? ? ? ? ? ? ? $.ajax({? ? ? ? ?
? ? ? ? ? ? ? ? //方法1
? ? ? ? ? ? ? ? //url: 'ls?flag=true&' + ps,
? ? ? ? ? ? ? ? ? ? //data: {
? ? ? ? ? ? ? ? ? ? // act: a,
? ? ? ? ? ? ? ? ? ? // pwd: p
? ? ? ? ? ? ? ? ? ? //},
? ? ? ? ? ? ? ? ? ? //方法2
? ? ? ? ? ? ? ? ? ? data: params,
? ? ? ? ? ? ? ? type: 'POST',
? ? ? ? ? ? ? ? success: function(data){
? ? ? ? ? ? ? ? ? ? alert(data);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }? ? ? ? ? ?
? ? ? ? ? ? }
? ? ? ? ? ??
? ? ? ? ? ? function doCheck(){
? ? ? ? ? ? var flag = true;
? ? ? ? ? ? //驗(yàn)證時(shí)修改flag的值來確定是否執(zhí)行提交的servlet
? ? ? ? ? ? var act = $('#act').val();
? ? ? ? ? ? var len = act.length;
? ? ? ? ? ? if(len > 30 || len < 6) {
? ? ? ? ? ? flag = false;
? ? ? ? ? ? alert('賬號(hào)的長度必須在6到30位之間');
? ? ? ? ? ? }
? ? ? ? ? ? return flag;
? ? ? ? ? ? }
? ? ? ? </script>
? ? </head>
? ? <body>
? ? ? ? <form id="frm" action="" method="post">
? ? ? ? ? ? <label>賬號(hào)：</label>
? ? ? ? ? ? <input type="text" name="act" id="act" />
? ? ? ? ? ? <br>
? ? ? ? ? ? <label>密碼：</label>
? ? ? ? ? ? <input type="password" name="pwd" id="pwd"/>
? ? ? ? ? ? <br>
? ? ? ? ? ? <input type="button" value="提交" onclick="doAjax();" />
? ? ? ? </form>?
? ? </body>
</html>
Ajax提交END
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
? ? String path = request.getContextPath();
? ? String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? ? <head>
? ? ? ? <base hreff="<%=basePath%>">
? ? ? ? <title></title>
? ? ? ? <meta http-equiv="pragma" content="no-cache">
? ? ? ? <meta http-equiv="cache-control" content="no-cache">
? ? ? ? <meta http-equiv="expires" content="0">
? ? ? ? <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
? ? ? ? <meta http-equiv="description" content="This is my page">
? ? </head>
? ? <body>
? ? ? ? <h1>管理頁面</h1>
? ? </body>
</html>
