利用js Ajax和jQuery Ajax校验数据库中的用户名是否存在

最新推荐文章于 2022-12-07 10:40:46 发布

赵康儿

最新推荐文章于 2022-12-07 10:40:46 发布

阅读量888

点赞数 1

分类专栏： AJAX 文章标签： js jQuery Ajax 校验

本文链接：https://blog.csdn.net/qq_36985520/article/details/88804294

版权

AJAX 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

利用js Ajax和jQuery Ajax校验数据库中的用户名是否存在

前端html代码

<form action="" method="post">
  <table>
    <tr>
      <td>用户名:</td>
      <td><input type="text" name="username" id="username" onblur="checke();">
      	<span id="span"></span>
      </td>
    </tr>
    <tr>
      <td>密&nbsp;&nbsp;码:</td>
      <td><input type="password" name="password" id="password"></td>
    </tr> 
    <tr>
      <td colspan="2"><input type="submit" value="注册"></td>
    </tr>
  </table>
</form>

js Ajax步骤

获取Ajax对象XMLHttpRequest

var ajax = new XMLHttpRequest();

打开地址

ajax.open("请求方式", "路径?参数");

发送

ajax.send();

后台servlet接收参数，通过数据库检查用户名是否重复
判断响应码和状态码，处理结果

ajax.onreadystatechange = function(){
	if(ajax.readyState==4){
		if(ajax.status==200){
			var span = document.getElementById("span");
			var txt = ajax.responseText;
			if(txt=="ok!"){
				username.focus();
			} 
			span.innerHTML = txt;
		}
	}
}

完整写法

<script type="text/javascript">
	var username = document.getElementById("username");
	 function checke(){
		var username = document.getElementById("username");
		var ajax = new XMLHttpRequest();
		ajax.open("post", "http://localhost:8080/test/ajax?username="+username.value);
		ajax.send();
		ajax.onreadystatechange = function(){
			if(ajax.readyState==4){
				if(ajax.status==200){
					var span = document.getElementById("span");
					var txt = ajax.responseText;
					if(txt=="ok!"){
					username.focus();
					} 
					span.innerHTML = txt;
				}
			}
		}
	} 
</script>

jQuery Ajax写法

function checke(){
	$.ajax({
		url:"http://localhost:8080/test/ajax",//路径
		type:"POST",//请求方式
		data: "username="+$("#username").val(),//请求参数
		success:function(arg){
			if(arg=="ok!"){
				$("#username").focus();
			}
			$("#span").html(arg);
	}});
};