標籤：script img 輸入 servlet post請求 html4 cte 不同 基礎
1:register.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>register.jsp</title><script type="text/javascript"> var xhr; function checkUsername() { //擷取標籤 var checkResult = document.getElementById("checkResult"); checkResult.innerHTML = "<font color=‘red‘>正在檢測使用者名稱...</font>"; //擷取使用者輸入的使用者名稱 var username = document.getElementById("username").value; //建立瀏覽器中可以發送非同步請求的對象xhr,不同瀏覽器的建立方式不同 if(window.ActiveXObject){//IE瀏覽器 xhr = new ActiveXObject("Microsoft.XMLHttp"); }else if(window.XMLHttpRequest){//不是IE瀏覽器 xhr = new XMLHttpRequest(); } //事件監聽(一旦發現狀態發生變化，就執行函數handleRequest，得到伺服器響應完成頁面局部重新整理) xhr.onreadystatechange = handleRequest; /*用GET方式發送請求 xhr.open("GET","UserServlet?f=1&username="+username,true); xhr.send(null); */ //POST發送請求//自己建立的UserServlet xhr.open("POST","UserServlet",true); //設定POST請求的頭 xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //發送請求資料 xhr.send("f=1&username="+username); } //得到伺服器響應,完成頁面局部重新整理 function handleRequest() { //擷取標籤 var checkResult = document.getElementById("checkResult"); if(xhr.readyState == 4){ if(xhr.status == 200){ checkResult.innerHTML = "<font color=‘red‘>"+xhr.responseText+"</font>"; }else{ alert("有錯"+xhr.status+":"+xhr.statusText); } } }</script></head><body> <form action="/ajax_1/UserServlet?f=1" method="post"> 使用者名稱:<input type="text" id="username" name="username" onblur="checkUsername();"><label id="checkResult"></label><br> <input type="password" id="password" name="password"><br> <input type="submit" value="註冊"> </form></body></html>
2:UserServlet.java
package servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;
public class UserServlet extends HttpServlet { private static final long serialVersionUID = 1L; protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //處理響應中文亂碼 response.setContentType("text/html;charset=UTF-8"); Integer f = Integer.parseInt(request.getParameter("f")); switch (f) { case 1: this.checkUsername(request, response); break; case 2: this.register(request, response); break; } } //檢測使用者名稱是否重複 protected void checkUsername(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out = response.getWriter(); //擷取從前台頁面傳來的username String username = request.getParameter("username"); //簡化處理邏輯（本應該去資料庫查詢） if("zhangsan".equals(username)){ out.print("使用者名稱"+username+"已經有人註冊，請選擇一個新的使用者名稱"); }else{ out.print("恭喜您"+username+"可以使用"); } out.close(); } //使用者註冊 protected void register(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { PrintWriter out =response.getWriter(); String username = request.getParameter("username"); //簡化處理邏輯（本應該去資料庫添加） if("zhangsan".equals(username)){ out.print("使用者名稱"+username+"已經有人註冊，請選擇一個新的使用者名稱"); }else{ //資料庫添加... out.print("恭喜您"+username+"註冊成功"); } out.close(); }}
3：web.xml
<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5"> <servlet> <servlet-name>UserServlet</servlet-name> <servlet-class>servlet.UserServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>UserServlet</servlet-name> <url-pattern>/UserServlet</url-pattern> </servlet-mapping></web-app>
--------------------------------------------------------------------------------------------------------------------------------
ajax基礎------備忘
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
