Ajax异步传输

异步传输
今天我们来学习一下关于ajax异步传输,很多人会问,异步和同步的区别是什么?有些时候,我们当修改或者更新了新数据之后,需要刷新当前页面才能使新数据显示在当前页面上,这就是同步,异步就是不需要刷新页面,仅仅是光标移开或者键盘弹起就能引起将当前 数据传送到后台数据库中进行校验或者更改之后再将数据传回到页面,中间经历的时间很短很短。在进行web开发的时候,我们经常需要用到异步传输,进行信息验证,比如在注册界面的时候,需要将输入的信息和数据库中的已有数据进行比对,不必等到所有信息都被完善了之后点击提交才进行数据校验,这样可以提高用户使用的效率。那接下来我们来看看ajax在jsp中的运用。简单以一个登录页面为例子:
第一步,我选择先创建一个信息实体类,用来装验证返回的信息


然后,我们去简单写一个登录界面 首先我们需要在webroot下新建satatic文件夹,然后新建js包再导入jquery包,因为用jquery比用js简单很多,代码如下:





然后 我们来编写ajax代码:
 <script>
  $(function(){
  $("#name").blur(function(){
  $.ajax({
  url:"login?"+new Date(),
  method:"POST",
  dataType:"json",
  data:{"name":$("#name").val()},
  success:function(result){
  $("#tishi").html(result.msg);
  }
  });
  });
  });
  </script>

由于时间关系,在这里我就只举一个很小的例子,不连接数据库,所以为了方便,我就在登录界面的body下面添加上面这串代码,其中需要说一下的是,jquery来写ajax的话,所需要五个参数:url,即传输的地址,通常我们为了及时刷新,防止缓存,我们需要带一个对值不影响的参数,通常我们用日期。metghod:就是发出参数的请求方法,datatype:值返回数据类型,data:指发出的参数。success:指参数传送出去之后,也得到了相应的处理并且成功返回时所执行的代码块。

最后我们来到参数提交的地址所对应的serlet中进行处理。代码如下:



这里值得一提的是JSONObject json =JSONObject.fromObject(msg);
这是把其他对象转化为JSON对象 我们这里会需要导入包 相应需要的包可自行在网上查询

最后我们来看看效果吧!




如果输入正确的话 


今天就到这里了,下次我会再用maven做一个更完善的信息验证功能!

猜你喜欢

转载自blog.csdn.net/qq_34800258/article/details/78605215
今日推荐