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

一、页面代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>MyHtml.html</title>
  5.  
  6. <meta name="keywords" content="keyword1,keyword2,keyword3">
  7. <meta name="description" content="this is my page">
  8. <meta name="content-type" content="text/html; charset=UTF-8">
  9.  
  10. <body>
  11.     <table>
  12.         <tr>
  13.             <td>Login:</td>
  14.             <td><input id="username" type="text" name="login"></td>
  15.         </tr>
  16.         <tr>
  17.             <td>Password:</td>
  18.             <td><input type="password" name="password" id="password"></td>
  19.         </tr>
  20.         <tr>
  21.             <td colspan="2"><input type="submit"></td>
  22.         </tr>
  23.     </table>
  24. </body>
  25. </html>

二、jQuery代码

  1. // 导入jQuery
    <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
  2. <script type="text/javascript">
  3.     $(document).ready(function() {
  4.         $("#username").keyup(function() {
  5.             var value = $(this).val();
  6.             var strData = "username=" + value;
  7.  
  8.              $.ajax({
  9.                 url : "MyServlet1",
  10.                 type : "get",
  11.                 //data : {"username":value}, // json格式
  12.                 data: strData,
  13.                 dataType : "text",
  14.                 success : function(data, strStatus, xhr) {
  15.                     if (data == "已使用")
  16.                         $("#username").css("border-color", "red");
  17.                     else
  18.                         $("#username").css("border-color", "green");
  19.                 },
  20.                 error : function(xhr, strStatus, strError) {
  21.                     alert(strError);
  22.                 }
  23.             });
  24.         });
  25.     });
  26. </script>

三、servlet代码

  1. package com.yh.myServlet;
  2.  
  3. import java.io.IOException;
  4. import java.io.PrintWriter;
  5.  
  6. import javax.servlet.ServletException;
  7. import javax.servlet.http.HttpServlet;
  8. import javax.servlet.http.HttpServletRequest;
  9. import javax.servlet.http.HttpServletResponse;
  10.  
  11. public class MyServlet1 extends HttpServlet {
  12.  
  13.     private static final long serialVersionUID = 1L;
  14.  
  15.     @Override
  16.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  17.         // TODO Auto-generated method stub
  18.         response.setContentType("text/html;charset=utf-8");
  19.         PrintWriter out = response.getWriter();
  20.         String userName = request.getParameter("username");
  21.         System.out.println(userName);
  22.         if (userName.equals("yh")) {
  23.             out.print("已使用");
  24.         } else {
  25.             out.print("可使用");
  26.         }
  27.     }
  28. }

四、配置servlet

  1.   <servlet>
  2.       <servlet-name>MyServlet1</servlet-name>
  3.       <servlet-class>com.yh.myServlet.MyServlet1</servlet-class>
  4.   </servlet>
  5.  
  6.   <servlet-mapping>
  7.       <servlet-name>MyServlet1</servlet-name>
  8.       <url-pattern>/Pages/MyServlet1</url-pattern>
  9.   </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——搭建FTP服务

    一.FTP基本概念: 1.FTP的作用: 实现文件系统的安全匿名访问:包括上传.下载和查看,可以应用于Windows和Linux系统 2.FTP的工作原理 server与client都支持ftp传输协 ...

  2. 使用 @Transactional 时常犯的N种错误

    @Transactional是我们在用Spring时候几乎逃不掉的一个注解,该注解主要用来声明事务.它的实现原理是通过Spring AOP在注解修饰方法的前后织入事务管理的实现语句,所以开发者只需要通 ...

  3. Spark 安装部署与快速上手

    Spark 介绍 核心概念 Spark 是 UC Berkeley AMP lab 开发的一个集群计算的框架,类似于 Hadoop,但有很多的区别. 最大的优化是让计算任务的中间结果可以存储在内存中, ...

  4. Java_map

    1 package Test; 2 3 import java.util.HashMap; 4 import java.util.Map; 5 6 public class MapTest { 7 p ...

  5. [bzoj2432]兔农

    将每一个重置为0的点作为一段,那么它会导致后面为以x x为开头的斐波拿起数列的东西,那么设这一段是以x为开头,要快速转移到下一段,就可以解决这道题目为了转移,我们要处理出下面的东西:1.求出x关于模k ...

  6. Winform开发的快速、健壮、解耦的几点建议

    在Winform开发领域开发过十多年的项目中,见证着形形色色的架构和官方技术的应用,从最早类似Winform模式的WebForm技术,到接着的JQuery+界面组件,再到Asp.net Core的技术 ...

  7. Java-ASM框架学习-修改类的字节码

    Tips: ASM使用访问者模式,学会访问者模式再看ASM更加清晰 ClassReader 用于读取字节码,父类是Object 主要作用: 分析字节码里各部分内容,如版本.字段等等 配合其他Visit ...

  8. CF1540B Tree Array

    先写一下自己想到的部分: 考虑枚举一个根. 计算一个点对出现的概率. 对于我这种期望概率基本不会的人,差点就把这题切了. 自己想到的部分都没有假. 问题在于: 如何计算一个点对出现的概率. 考虑和这两 ...

  9. C语言 文本字符串存入二维数组

    字符串存入数组 文本内容: line1_1 line1_2line2_1 line2_2line3_1 line3_2line4_1 line4_2line5_1 line5_2line6_1 lin ...

  10. CPF C#跨平台UI框架发布安卓端预览版

    CPF的安卓端适配采用Xamarin的安卓绑定库,而不是Xamarin.Form.CPF和flutter差不多,完全由skia绘制,基本不依赖原生控件. 当前还只是预览版,不建议用在正式项目中. 可能 ...