jquery使用ajax异步传输

最新推荐文章于 2024-06-28 15:32:06 发布

mockingbirds

最新推荐文章于 2024-06-28 15:32:06 发布

阅读量4.7k

点赞数 1

分类专栏： jquery 文章标签：异步 ajax jquery 请求

本文链接：https://blog.csdn.net/mockingbirds/article/details/46671509

版权

jquery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前面两篇博文学习了jquery的基本选择器，以及一些基本的案例。在jquery中还为我们提供了一个很方便的用法，那就是ajax请求，简化了传统的使用xmlhttprequest进行ajax请求的写法。这里我以一个简单的用户注册来作为demo。

使用$.get和$.post实现异步请求

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'index.jsp' starting page</title>
    <script type="text/javascript" src="js/jquery-2.1.4.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#uname").blur(function(){
                var uname = $(this).val();
                //发送GET请求
                var url="UserServlet";
                //$.get(url,{"uname":uname},function(data){
                $.post(url,{"uname":uname},function(data){
                    if(data=='true'){
                        $("#result").html("<font color='red'>用户名已存在!</font>");
                    }else{
                        $("#result").html("<font color='green'>用户名可用!</font>");
                    }
                });
            });
        })
    </script>
  </head>

  <body>
     <form action="UserServlet" method="post">
        <p>用户名:<input type="text" name="uname" id="uname"/><span id="result" style="{display:inline}"></span></p>
        <p>密码:<input type="text" name="upass"/></p>
        <p><input type="submit" value="提交"></p>
     </form>
  </body>
</html>

关键代码：

$("#uname").blur(function(){
                var uname = $(this).val();
                //发送GET请求
                var url="UserServlet";
                //$.get(url,{"uname":uname},function(data){
                $.post(url,{"uname":uname},function(data){
                    if(data=='true'){
                        $("#result").html("<font color='red'>用户名已存在!</font>");
                    }else{
                        $("#result").html("<font color='green'>用户名可用!</font>");
                    }
                });
            });

这里，首先选择class=”uname”的元素，通过blur设置其失去焦点的回调方法。
var uname = $(this).val(); //得到该元素的值
这里使用的是异步的post请求传输数据：

$.post("需要请求的url",需要传送的json格式的参数,
   function(data){
     //这个回调函数
   });

可以看到这里我请求的是UserServlet并且传送了一个{“uname”:uname}这样的参数给后台。在回调函数中判断后台返回的值如果是true则显示”用户名已存在!”,否则显示”用户名可用!”

下面看看UserServlet的关键代码：

request.setCharacterEncoding("UTF-8");//解决POST提交的乱码问题
        try {
            Thread.sleep(1500);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        PrintWriter out =  response.getWriter();
        //获取用户名
        String uname = request.getParameter("uname");
        //解决Get提交的数据乱码问题
        String str = new String(uname.getBytes("iso-8859-1"),"GBK");
        System.out.println(str);
        boolean isExist = str.equals("xiaoming");
        out.print(isExist);

这里首先sleep 1.5秒时间用来模拟网络的延迟，这里为了方便，直接判断如果前端传输的uname是”xiaoming”，则表示已经存在，返回true，否则返回false。
看下效果：
这里写图片描述

使用$.ajax实现异步请求

使用$.ajax实现异步请求可以进行更加丰富的操作，包含从请求发出前到服务器响应的各个事件。
有如下一些回调函数：
1.beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
2.error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
3.dataFilter 在请求成功之后调用。传入返回的数据以及”dataType”参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
4.success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
5.complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

先看下效果：
这里写图片描述
关键的异步传输代码如下：

$(function(){
            $("#uname").blur(function(){
                var uname = $(this).val();
                //发送GET请求
                $.ajax({
                    type: "POST",
                    url:"UserServlet",
                    dataType: "text",
                    data:{"uname":uname},
                    beforeSend:function(){
                        $("#result").html("");
                        $("#loadImg").show();
                    },
                    complete:function(){
                        $("#loadImg").hide();
                    },
                    success:function(data){
                        if(data=='true'){
                            $("#result").html("<font color='red'>用户名已存在!</font>");
                        }else{
                            $("#result").html("<font color='green'>用户名可用!</font>");
                        }
                    }  
                });
            });
        })

说明一下$ajax请求参数的意思：
type: “POST” 表示发送的是一个post请求
url:”UserServlet” 表示请求的url路径
dataType: “text” 表示传输的数据类型
data:{“uname”:uname} 具体传输的数据，是一个json格式的字符串

beforeSend:function(){
    $("#result").html("");
    $("#loadImg").show();
}

请求之前，显示加载的gif动画

complete:function(){
    $("#loadImg").hide();
}

请求完成，隐藏gif动画

success:function(data){
    if(data=='true'){
        $("#result").html("<font color='red'>用户名已存在!</font>");
    }else{
        $("#result").html("<font color='green'>用户名可用!</font>");
    }
}

请求成功的回调函数，根据服务器返回的数据，显示不同的结果。

源码下载

mockingbirds

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jquery使用ajax异步传输

前面两篇博文学习了jquery的基本选择器，以及一些基本的案例。在jquery中还为我们提供了一个很方便的用法，那就是ajax请求，简化了传统的使用xmlhttprequest进行ajax请求的写法。这里我以一个简单的用户注册来作为demo。使用$.get和$.post实现异步请求index.jsp<%@ page language="java" import="java.util.*" pageE
复制链接

扫一扫

专栏目录