JavaScript和JQuery分别实现Ajax

超、凢脫俗 2022-05-19 05:26 205阅读 0赞

index010\_js & index010\_jquery的body代码中都写入：

<form action="validate" method="post">
    	<table align="center" width="500px" frame="box" rules="rows">
    		<tr><td>用户名</td><td><input type="text" size="20" name="username"><font id="mess" color="red"></font></td></tr>
    		<tr><td>邮箱号：</td><td><input type="text" size="20" name="email"></td></tr>
    		<tr><td colspan="2"><input type="submit" value="登录"></td></tr>
    	</table>
    	</form>

controller包下公用的servlet文件ValidateServlet.java

package Controller;
    
    import java.io.IOException;
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    /**
     * Servlet implementation class ValidateServlet
     */
    @WebServlet("/validate")
    public class ValidateServlet extends HttpServlet {
    	
    	/**
    	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		doPost(request, response);
    	}
    
    	/**
    	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
    	 */
    	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    		request.setCharacterEncoding("utf-8");
    		String username=request.getParameter("username");
    		if(username.equals("admin")) {
    			response.getWriter().print("0");//失败
    		}else {
    			response.getWriter().print("1");//成功
    		}
    	}
    
    }

index010\_js.jsp

<script>
    	var xhr;
    	function checkUsers(t){
    		var username=t.value;
    		//1.获取XMLHttpRequest
    		xhr=getRequest();
    		//2.设置请求方式
    		xhr.open("post","validate");
    		//3.指定回调函数
    		xhr.onreadystatechange=doResult;
    		xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    		//发送请求
    		xhr.send("username="+username);
    	}
    	
    	//回调函数
    	function doResult(){
    		if(xhr.status==200){
    			var res=xhr.responseText;//获取响应结果
    			var mess=document.getElementById("mess");//获取相应结果后，找到id为mess放值
    			if(res=='1'){
    				mess.innerHTML="用户名可以使用！";
    			}else{
    				mess.innerHTML="用户名已存在！";
    			}
    		}
    	}
    
    	function getRequest() {
    		if (window.XMLHttpRequest) {
    			//在IE7及非IE浏览器中
    			xmlhttp = new XMLHttpRequest();
    		} else {
    			try {
    				//在较新的IE版本中
    				xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    			} catch (e) {
    				try {
    					//这是在IE7以前的版本中
    					xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    				} catch (e) {
    					alert("对不起，您的浏览器不支持xmlHttpRequest对象");
    				}
    			}
    		}
    		return xmlhttp;
    	}
    </script>

index010\_jquery.jsp写入：

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script>
    	$("[name=username]").blur(function(){
    		$.ajax({
    			url:"validate",
    			data:{"username":$(this).val()},
    			type:"post",
    			dataType:"text",
    			success:function(result){
    				if(result=="1"){
    					$("#mess").html("用户名可用");
    				}else{
    					$("#mess").html("用户名不可用");
    				}
    			},
    			error:function(result){
    				alert(result);
    			}
    		});
    	});
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，205人围观）

还没有评论，来说两句吧...

相关阅读

相关使用jQuery实现Ajax

jQuery对Ajax操作进行了封装，在jQuery最底层的方法是$.ajax()，第二层是load(),$.get(),$.post()，第三层是$.getScript(),

怼烎@/ 2024年02月17日 22:56/ 0 赞/ 47 阅读

相关 Ajax和JSON-学习笔记02【JQuery方式实现Ajax】

> [Java后端学习路线笔记汇总表【黑马程序员】][Java_ _] > > 1. [Ajax和JSON-学习笔记01【原生JS方式实现Ajax】][Ajax_

秒速五厘米/ 2022年10月30日 13:24/ 0 赞/ 169 阅读

相关 Jquery实现Ajax应用

Jquery实现Ajax应用 -------------------- 使用load()方法异步请求数据 -------------------- 使用load

今天药忘吃喽~/ 2022年09月28日 11:58/ 0 赞/ 149 阅读

相关 JavaScript、Ajax与jQuery的关系

> > > > 一、简要概括： > > （1）JS是一种用于Web客户端开发的脚本语言。 > > （2）Ajax是一种编程技术，主要用途是提供

Dear 丶/ 2022年09月27日 03:59/ 0 赞/ 208 阅读

相关 javascript、jquery、AJAX总结

其实在学习之前，就已经用上了js，jquery和ajax，不过当时不清楚这些的区别，就全都当成js来看，然后别人一说jquery，ajax都觉得好像很高级，等到自己学习的时

缺乏、安全感/ 2022年08月19日 15:13/ 0 赞/ 108 阅读

相关 js和jquery分别实现tab标签页

首先列出样式和html标签 <style type="text/css"> {margin: 0;padding: 0;}

客官°小女子只卖身不卖艺/ 2022年08月12日 05:58/ 0 赞/ 195 阅读

相关 JQuery实现Ajax功能

使用jquery实现ajax功能的示例代码如下： $.ajax({ url:"/WebCrowd/servlet/Aj

谁践踏了优雅/ 2022年07月12日 02:41/ 0 赞/ 216 阅读

相关 JavaScript、jQuery和Ajax初步了解

在进行牛腩新闻发布系统的时候，遇到了一些新名词，于是做了简单的总结： 1、JavaScript： JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发

不念不忘少年蓝@/ 2022年06月04日 09:58/ 0 赞/ 232 阅读

相关 AJAX -- jQuery实现

$("button").click(function(){ $.ajax({url:"demo_test.txt",success:function(re

怼烎@/ 2022年06月02日 04:40/ 0 赞/ 172 阅读

相关 JavaScript和JQuery分别实现Ajax

index010\_js & index010\_jquery的body代码中都写入： <form action="validate" method="post">

超、凢脫俗/ 2022年05月19日 05:26/ 0 赞/ 206 阅读