jquery下载链接：https://pan.baidu.com/s/1KWQVpPV-RwhwGeBaXbZdVA
提取码：vn7x

一、页面代码

<!DOCTYPE html>

<html>

<head>

<title>MyHtml.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">

<meta name="description" content="this is my page">

<meta name="content-type" content="text/html; charset=UTF-8">

<body>

    <table>

        <tr>

            <td>Login:</td>

            <td><input id="username" type="text" name="login"></td>

        </tr>

        <tr>

            <td>Password:</td>

            <td><input type="password" name="password" id="password"></td>

        </tr>

        <tr>

            <td colspan="2"><input type="submit"></td>

        </tr>

    </table>

</body>

</html>

二、jQuery代码

// 导入jQuery
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

    $(document).ready(function() {

        $("#username").keyup(function() {

            var value = $(this).val();

            var strData = "username=" + value;

             $.ajax({

                url : "MyServlet1",

                type : "get",

                //data : {"username":value}, // json格式

                data: strData,

                dataType : "text",

                success : function(data, strStatus, xhr) {

                    if (data == "已使用")

                        $("#username").css("border-color", "red");

                    else

                        $("#username").css("border-color", "green");

                },

                error : function(xhr, strStatus, strError) {

                    alert(strError);

                }

            });

        });

    });

</script>

三、servlet代码

package com.yh.myServlet;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class MyServlet1 extends HttpServlet {

    private static final long serialVersionUID = 1L;

    @Override

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        // TODO Auto-generated method stub

        response.setContentType("text/html;charset=utf-8");

        PrintWriter out = response.getWriter();

        String userName = request.getParameter("username");

        System.out.println(userName);

        if (userName.equals("yh")) {

            out.print("已使用");

        } else {

            out.print("可使用");

        }

    }

}

四、配置servlet

  <servlet>

      <servlet-name>MyServlet1</servlet-name>

      <servlet-class>com.yh.myServlet.MyServlet1</servlet-class>

  </servlet>

  <servlet-mapping>

      <servlet-name>MyServlet1</servlet-name>

      <url-pattern>/Pages/MyServlet1</url-pattern>

  </servlet-mapping>

注：这个Pages是根据html页面的路径设置的

Ajax异步更新网页（使用jQuery）的更多相关文章

  1. Ajax异步更新网页（使用原生JavaScript）

    一.页面代码 <!DOCTYPE html> <html> <head> <title>MyHtml.html</title> <me ...

  2. flask+sqlite3+echarts3+ajax 异步更新数据

    结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...

  3. Vue 父组件ajax异步更新数据，子组件props获取不到

    转载 https://blog.csdn.net/d295968572/article/details/80810349 当父组件 axjos 获取数据,子组件使用 props 接收数据时,执行 mo ...

  4. 使用Ajax选取ListBox的值异步更新视图，并作为表单值提交

    一.控制器返回一个ViewBag MultiSelecList值. public ActionResult Create() { ViewBag.ReviewIndexItems = new Mult ...

  5. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  6. 关于我们ajax异步请求的方法与知识

      做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school ...

  7. 项目中使用的ajax异步读取数据结构设计

    设计稍微复杂了一点,完成ajax读取功能涉及到了很多页面.虽然如此,但感觉比较灵活. 和传统方法唯一的区别在于多了一层数据容器控件,里面提供了显示数据的HTML元素及相应的JS方法. 这样数据控件指生 ...

  8. 触碰jQuery：AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  9. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

随机推荐

  1. Linux usb 3. Host 详解

    文章目录 1. 简介 2. Usb Core 驱动设备模型 2.1 Usb Device Layer 2.1.1 device (struct usb_device) 2.1.2 driver (st ...

  2. 7.深入TiDB：range 范围计算优化

    本文基于 TiDB release-5.1进行分析,需要用到 Go 1.16以后的版本 我的博客地址:https://www.luozhiyun.com/archives/605 这篇文章首先会回顾一 ...

  3. 从零开始制作一个linux iso镜像

    一.前言     对于一个极简化的linux系统而言,只需要三个部分就能组成,它们分别是一个linux内核.一个根文件系统和引导.以下是本文制作linux iso镜像所用到的系统和软件:     OS ...

  4. Forest v1.5.13 发布，声明式 HTTP 框架，已超 1.7k star

    Forest介绍 Forest 是一个开源的 Java HTTP 客户端框架,它能够将 HTTP 的所有请求信息(包括 URL.Header 以及 Body 等信息)绑定到您自定义的 Interfac ...

  5. 『学了就忘』Linux软件包管理 — 43、RPM包的校验和证书

    目录 1.RPM包的校验 (1)RPM包校验基本命令 (2)校验某个系统文件是否被修改举例 (3)验证内容中8个信息的具体内容 (4)文件类型有哪些 2.RPM包的证书 (1)数字证书 (2)数字证书 ...

  6. 菜鸡的Java笔记 第十一 - java 封装性

    1.1封装的基础实现.        封装是把过程和数据包围起来,对数据的访问只能通过已定义的接口.面向对象计算始于这个基本概念,即现实世界可以被描绘成一系列完全自治.封装的对象,这些对象通过一个受保 ...

  7. 记一次 .NET 某电商无货源后端服务 死锁分析

    一:背景 1. 讲故事 这个月初,星球里的一位朋友找到我,说他的程序出现了死锁,怀疑是自己的某些写法导致mongodb出现了如此尴尬的情况,截图如下: 说实话,看过这么多dump,还是第一次遇到真实的 ...

  8. 躺平吧，平铺的窗口「GitHub 热点速览 v.21.47」

    作者:HelloGitHub-小鱼干 用 macOS 系统经常会遇到的一个问题便是多开窗口如何快速找寻的问题,本周特推项目 yabai 便是来解决这个问题的.直接把所有窗口平铺,是不是很"正 ...

  9. [luogu7736]路径交点

    对于两条路径,注意到每一个交点都会改变两者的上下关系,因此两条路径交点的奇偶性,仅取决于两者的起点和终点是否改变了上下关系(改变即为奇数) 类似地,对于整个路径方案,令$p_{i}$为以第一层的$i$ ...

  10. java的String参数格式化

    String类的format()方法用于创建格式化的字符串以及连接多个字符串对象.熟悉C语言的同学应该记得C语言的sprintf()方法,两者有类似之处.format()方法有两种重载形式. form ...