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. 运行脚本 结果出现 Vim: Warning 并且卡住不能输入其它命令

    当我在执行一个 关于执行linux操作的php脚本时,就出现了以下信息:"Vim: Warning: Output is not to a terminal",接着出现了一大堆的字 ...

  2. 来了！公开揭密团队成员开发鸿蒙 OpenHarmony 的完整过程(收获官方7000奖金和开发板等，1w字用心总结)

    背景 随着 OpenHarmony 组件开发大赛结果公布,我们的团队成员被告知获得了二等奖,在开心之余也想将我们这段时间宝贵的开发经验写下来与大家分享,当我们看到参赛通知的时候已经是 9 月中旬的时候 ...

  3. [IIS]文件夹权限

    发布完iis,默认的 Application Pool 没有权限访问文件夹. 可以给项目文件夹添加用户权限. 右键 - "属性" - "安全" - " ...

  4. C/C++ Qt Tree与Tab组件实现分页菜单

    虽然TreeWidget组件可以实现多节点的增删改查,但多节点操作显然很麻烦,在一般的应用场景中基本上只使用一层结构即可解决大部分开发问题,TreeWidget组件通常可配合TabWidget组件,实 ...

  5. 【玩具】使用Python自动化发送微信消息进行订水

    事情是这样的,我知道淘宝上有卖一种USB接口的大按钮,估计是给工厂或者医院之类的场景设计的,样子长这样: 然后我就一直挺想搞一个的,不为别的,就是玩,但是想来想去也没想到这玩意儿对我而言能有啥用途,就 ...

  6. Codeforces 739C - Alyona and towers（线段树）

    Codeforces 题目传送门 & 洛谷题目传送门 可能有人会问我为什么为这道 *2500 的 D1C 写题解,我觉得大概是想要在写题解数量上 dd ycx 吧,因为 ycx 到目前为止写了 ...

  7. Go语言核心36讲（Go语言实战与应用二十）--学习笔记

    42 | bufio包中的数据类型 (上) 今天,我们来讲另一个与 I/O 操作强相关的代码包bufio.bufio是"buffered I/O"的缩写.顾名思义,这个代码包中的程 ...

  8. C++ and OO Num. Comp. Sci. Eng. - Part 4.

    命名空间与文件(Namespaces and Files) 在 C++ 中,命名空间为包含相关声明与定义的逻辑单元. 将一个大程序分割为不同部分并且将其储存在不同的文件中可以实现模块化编程. 未命名的 ...

  9. 【GS模型】使用R包sommer进行基因组选择的GBLUP和RRBLUP分析？

    目录 简介 GS示例代码 简介 R包sommer内置了C++,运算速度还是比较快的,功能也很丰富,可求解各种复杂模型.语法相比于lme4包也要好懂一些. 建议查看文档:vignette("v ...

  10. expr判断是否为整数

    判断一个变量值或字符串是否为整数 原理:利用expr计算时变量或字符串必须为整数的规则,把变量和一个整数(非零) 相加,判断命令返回是否为0,0--成功为整数 #!/bin/bash expr $1 ...