关于如何使用ajax异步判断用户名是否存在

来源：互联网发布：淘宝八大山人书法全集编辑：程序博客网时间：2024/05/18 00:33

首先由于原生态的js中的ajax太过复杂一般使用js的封装框架例如（Dojo 、Scriptaculous 、Prototype 、yui-ext 、Jquery 、Mochikit、mootools 、moo.fx）在这里我使用jquery框架：

第一步首先去网下载jquery框架：http://jquery.com/

第二步：下载好的jquery框架有两个.js文件jquery-3.2.0.min和jquery-3.2.0前者是压缩版，后者是未压缩。任意使用一个即可。以上任意一个js放在项目的lib目录里并在jsp页面使用<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>引用jquery

第三步jsp代码：

$('#name').blur(function(){var username=$(this).val();if(username!=""){ $.ajax({    url:"Ajax",    //请求的url地址    contentType: "application/json; charset=utf-8",    dataType:"json",   //返回格式为json    async:true,//请求是否异步，默认为异步，这也是ajax重要特性    data:JSON.stringify({"username":username}), //使用这个函数可以转化为json格式   //参数值    type:"POST",   //请求方式   /*  beforeSend:function(){        //请求前的处理    }, */    success:function(data){    /*  因为服务器端返回的是json对象所以可以直接用对象名。属性名 */    /* JSON.stringify用于把json对象解析成string    JSON.parse()用于把json字符串解析成json对象 */    if(data.msg==1){     $('#n').css("color","green");    $('#n').html("该用户可以注册"); }else{    $('#n').css("color","red");    $('#n').html("该用户已注册");    $('#denglu').attr("disabled","disabled"); }    }, });

首先是jquery中$表示jquery的缩写$（"#name"）表示获取dom节点中控件id为name的对象, .blur（function（）{}）；是当输入框失去焦点时执行此方法。$.ajax表示jquery的ajax请求下面是固定写法

客户端：

 @RequestMapping(value="/Ajax")   public @ResponseBody JSONObject ajax(@RequestBody Ajax ajax) throws FileNotFoundException{    System.out.println(ajax.getUsername());    Map<String,String> map=new HashMap<String, String>();    List<User> list=new ArrayList<User>();  list= userSerivce.select(ajax.getUsername());  if(list.size()==0){      map.put("msg","1");  }  else{    map.put("msg","2");  }    JSONObject jsonObject=JSONObject.fromObject(map);                 return jsonObject;   }

使用@requestbody用于把ajax的json封装在java对象中。

0 0