博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ajax用法笔记
阅读量:2048 次
发布时间:2019-04-28

本文共 2859 字,大约阅读时间需要 9 分钟。

08220170928
1、代码如下:参考w3school编写
2、难点:服务器返回数据到前台的方式:response.getWriter().write("<font color=\"#FF0000\">此身份证号已存在!</font>");
3、在输入框中加入这个:οnkeyup="showHint(this.value),其中
showHint()时js中的函数
4、在前台写一个span作为占位符:<span id="txtHint"></span>
<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%><%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>   
员工添加 rel="stylesheet" type="text/css" href="css/bootstrap.css" media="all"> rel="stylesheet" type="text/css" href="css/css.css" media="all">
身份证号 添加 取消
package com.tiger.controller;import java.io.*;import javax.servlet.*;import javax.servlet.annotation.*;import javax.servlet.http.*;import com.tiger.bean.*;import com.tiger.service.*;import com.tiger.service.impl.*;/** * 接受ajax提交url的服务器 * @author tiger * @time 2017年9月28日 */@WebServlet(name="CardController",urlPatterns= {"/emp_card"})public class CardController extends HttpServlet { private static final long serialVersionUID = 1L; EmployeeService empService = new EmployeeServiceImpl(); public CardController2() { } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=UTF-8"); String uri=request.getRequestURI(); String action=uri.substring(uri.lastIndexOf("/")+1, uri.length()); if("emp_card".equals(action)){ Employee emp= card(request); if (emp !=null) { response.getWriter().write("此身份证号已存在!"); } } } protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } private Employee card(HttpServletRequest request){ //获取前台输入的信息 String card = request.getParameter("card_code"); return empService.findEmployeeByCard(card); }}function showHint(str){ if (str.length === 0) { document.getElementById("txtHint").innerHTML=""; return; } xmlHttp=GetXmlHttpObject() if (xmlHttp === null) { alert ("您的浏览器不支持AJAX!"); return; }var url="emp_card";url=url+"?card_code="+str;url=url+"&sid="+Math.random();xmlHttp.onreadystatechange=stateChanged;xmlHttp.open("GET",url,true);xmlHttp.send(null);}function GetXmlHttpObject(){ var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } } return xmlHttp;}function stateChanged() { if (xmlHttp.readyState==4) { document.getElementById("txtHint").innerHTML=xmlHttp.responseText; }}

转载地址:http://ojeof.baihongyu.com/

你可能感兴趣的文章
使用 font-spider 对 webfont 网页字体进行压缩
查看>>
云原生服务网格 Istio 1.4 部署指南
查看>>
让 Linux 防火墙新秀 nftables 为你的 VPS 保驾护航
查看>>
Istio 1.4 部署指南
查看>>
贫苦家庭用户的 Envoy xDS 控制平面
查看>>
Kubernetes Pod 网络精髓:pause 容器详解
查看>>
Docker 技术鼻祖 Linux Namespace 入门系列:Namespace API
查看>>
使用 ebpf 深入分析容器网络 dup 包问题
查看>>
Kubelet 中的 “PLEG is not healthy” 到底是个什么鬼?
查看>>
超详细的网络抓包神器 Tcpdump 使用指南
查看>>
从 Kubernetes 资源控制到开放应用模型,控制器的进化之旅
查看>>
从此以后运维与开发过上了没羞没臊的性福生活
查看>>
教你如何优雅地魔改 Grafana 主题,太实用了!
查看>>
让我们来看看回到单体的 Istio 到底该怎么部署
查看>>
超详细的网络抓包神器 tcpdump 使用指南
查看>>
iTerm2 都不会用,还敢自称老司机?(上)
查看>>
两个奇技淫巧,将 Docker 镜像体积减小 99%
查看>>
Istio 1.5 部署指南修正版
查看>>
不要轻易使用 Alpine 镜像来构建 Docker 镜像,有坑!
查看>>
Kubectl exec 背后到底发生了什么?
查看>>