JQuery中使用Ajax

来源：互联网发布：淘宝宝贝怎么修改类目编辑：程序博客网时间：2024/05/29 05:57

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);}

0 0