JQuery中使用Ajax

最新推荐文章于 2022-07-25 19:16:46 发布

beyond_zl

最新推荐文章于 2022-07-25 19:16:46 发布

阅读量250

点赞数

分类专栏： JavaEE 文章标签： jquery ajax

本文链接：https://blog.csdn.net/qq_15370821/article/details/53352210

版权

JavaEE 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

JQuery中的Ajax

**
JQuery对Ajax的操作进行了封装，在JQuery中最底层的方法是 $.ajax(),第二层是load(),$ .get()和 $.post(),第三层方法是$ .getSript和$.getJson();

使用load方法调用Ajax

<script type="text/javascript">
    $(function(){
        $("a").click(function(e){
            var url = this.href;
            var args = {time : new Date()};
            $("#content").load(url,args);
            e.preventDefault();//取消默认行为
        });
    });
</script>

load()能载入远程的HTML代码并插入到DOM中，结构是：load(url[,data][,callbanck])
data:发送到服务端的key/value数据
callback:请求完成时的回调函数，无论请求是否成功

使用post方法：

<script type="text/javascript">
    $(function(){
        $("a").click(function(e){
            var url = this.href;
            var args = {time : new Date()};
            $.post(url,args,function(data){
                var name = $(data).find("name").text();
                var email = $(data).find("email").text();
                $("#content").append("name :" + name + ", email :" + email);
            });


            e.preventDefault();//取消默认行为
        });
    });
</script>

getJSON方法:

<script type="text/javascript">
    $(function(){
        $("a").click(function(e){
            var url = this.href;
            var args = {time : new Date()};

            $.getJSON(url,args,function(data){
                var name = data.user.name;
                var email = data.user.email;
                $("#content").append("name :" + name + ", email :" + email);
            });


            e.preventDefault();//取消默认行为
        });
    });
</script>

使用get方法获取JSON:

<script type="text/javascript">
    $(function(){
        $("a").click(function(e){
            var url = this.href;
            var args = {time : new Date()};

            $.get(url,args,function(data){
                var name = data.user.name;
                var email = data.user.email;
                $("#content").append("name :" + name + ", email :" + email);
            },"JSON");


            e.preventDefault();//取消默认行为
        });
    });
</script>

什么是Ajax?不用刷新页面，但可以和服务端进行通信的方式
Ajax传输数据的三种方式：
1.XML 笨重，解析困难，但XML是通用的数据交换格式
2.HTML 不需要解析可以直接放到文档中，若仅更新一部分区域，但传输数据不是很方便，且HTML代码需要拼装完成
3.JSON 小巧，有面向对象的特性，且有很多第三方jar可以吧java对象或集合转为JSON字符串

Ajax实现检测用户名是否可用：

<script type="text/javascript">
    $(function(){
        $(":input[name=username]").change(function(){
            var value = $(this).val();
            value = $.trim(value);

            if(value != null) {
                var url = "${pageContext.request.contextPath}/ValiateUsername";
                var args = {"username":value,"time":new Date()};

                $.post(url,args,function(data){
                    $("#message").html(data);
                });
            }
        });
    });
</script>

</head>
<body>
    <form action="" method="post">
        Username : <input type="text" name="username" />
        <br>
        <div id="message"></div>
        <br>
        <br>
        <input type="submit" value="submit" />
    </form>
</body>

ValiateUsernameServlet:

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    List<String> usernames = Arrays.asList("abc","aaa");
    String userName = request.getParameter("username");
    String result = null;
    if(usernames.contains(userName) ) {
        result = "<font color='red'>用户名已存在</font>";
    }
    else if(userName.trim() == "") {
        result = "<font color='red'>用户名不能为空</font>";
    }
    else {
        result = "<font color='green'>用户名可用</font>";
    }
    response.setContentType("text/html");
    response.setCharacterEncoding("utf-8");
    response.getWriter().print(result);
}

beyond_zl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery中使用Ajax

**JQuery中的Ajax** JQuery对Ajax的操作进行了封装，在JQuery中最底层的方法是.ajax(),第二层是load(),.ajax(),第二层是load(),.get()和.post(),第三层方法是.post(),第三层方法是.getSript和$.getJson();使用load方法调用Ajax<script type="text/javascript"> $(f
复制链接

扫一扫

专栏目录