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. Springboot+Mybatisplus替换mybatis整合报错Mapped Statements collection does not contain value

    问题一: mybatisPlus完全兼容mybatis,一般来说直接替换掉就可以了,如果mybatis的数据源不能取消创建的话,就注掉mybatisplus的数据源 //@Configurationp ...

  2. 为什么建议使用你 LocalDateTime ，而不是 Date？

    在项目开发过程中经常遇到时间处理,但是你真的用对了吗,理解阿里巴巴开发手册中禁用static修饰SimpleDateFormat吗 通过阅读本篇文章你将了解到: 为什么需要LocalDate.Loca ...

  3. 我罗斯方块最终篇（Interface类）

    负责的任务 游戏过场及界面设计 Interface类的基础实现 根据队友需求完善Interface类功能 Interface类的本地测试 辅助队友改良游戏操作 代码要点 我们主要是通过控制台进行界面渲 ...

  4. Json跨域登录问题的之Access-Control-Allow-Origin 站点跨域请求的问题

    跨域调用json问题 闲暇之时,做了一个博客站点,站点发布网络之后程序功能完成,最后发现了一个跨域的问题,比如我使用abc.com打开系统,一切正常,后台没有任何文件请求报错问题,然后我又使用了www ...

  5. React-Router学习（基础路由与嵌套路由）

    示例:基本路由 在这个例子中,我们有3个'Page'组件处理<Router>. 注意:而不是<a href="/">我们使用<Link to=&quo ...

  6. Kubernetes 中的 gRPC 负载均衡

    安装环境依赖 docker-desktop >= 4.1.1 kubernetes >= 1.21.5 go >= 1.17 protobuf >= 3.17.3 istioc ...

  7. Django 小实例S1 简易学生选课管理系统 7 修改个人信息

    Django 小实例S1 简易学生选课管理系统 第7节--修改个人信息 点击查看教程总目录 作者自我介绍:b站小UP主,时常直播编程+红警三,python1对1辅导老师. 用户模块除了注册登录之外,还 ...

  8. SCTL 涅槃重生：投入 RAL 的怀抱

    在<DistSQL:像数据库一样使用 Apache ShardingSphere>一文中,PMC 孟浩然为大家介绍了 DistSQL 的设计初衷和语法体系,并通过实战操作展示了一条 SQL ...

  9. Codeforces 848C Goodbye Souvenir（CDQ 分治）

    题面传送门 考虑记录每个点的前驱 \(pre_x\),显然答案为 \(\sum\limits_{i=l}^{r} i-pre_i (pre_i \geq l)\) 我们建立一个平面直角坐标系,\(x\ ...

  10. 洛谷 P7154 - [USACO20DEC] Sleeping Cows P（dp）

    Portal 题意: 给出两个序列 \(a_1,a_2,\dots,a_n\),\(b_1,b_2,\dots,b_n\),\(i\) 与 \(j\) 能匹配当且仅当 \(a_i\leq b_j\). ...