jQuery —— Ajax

1. jQuery Ajax 简介

  • jQuery 对 Ajax 操作封装了一套跨浏览器,方便用户使用的 Api;

 

2. jQuery Ajax Load 方法

  • 远程请求,把请求的数据载入到 DOM 里;
  • load( url , [,data] , [,callback])
    • Url:请求地址
    • Data:请求参数
    • Callback:请求完成后的回调方法

 

3. jQuery Ajax Get/Post 方法

  • Ajax 请求后台;
  • $.post(URL,data,callback);
    • Url:请求地址
    • Data:请求参数
    • Callback:请求完成后的回调方法
  • <script type="text/javascript">
        $(document).ready(function(){
            $("#b1").click(function(){
                $("#d1").load("/HeadFirstJquery/ajax?action=load",{name:"张三",age:14},function(){
                    alert("执行完成");
                });
            });
            $("#b2").click(function(){
                $.post("/HeadFirstJquery/ajax?action=post",{id:1},function(data,textStatus){
                    alert("请求状态:"+textStatus);
                    alert("返回数据:"+data);
                    data=eval("("+data+")");
                    $("#name").val(data.name);
                    $("#age").val(data.age);
                });
            });
        });
    </script>
    public class AjaxServlet extends HttpServlet{
    
        private static final long serialVersionUID = 1L;
    
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            this.doPost(request, response);
        }
    
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            request.setCharacterEncoding("utf-8");
            String action=request.getParameter("action");
            if("load".equals(action)){
                this.load(request, response);
            }else if("post".equals(action)){
                this.post(request, response);
            }
        }
        
        private void load(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            response.setContentType("text/html;charset=utf-8");
            String name=request.getParameter("name");
            String age=request.getParameter("age");
            System.out.println("name:"+name);
            System.out.println("age:"+age);
            PrintWriter out=response.getWriter();
            out.println("jquery Ajax");
            out.flush();
            out.close();
        }
        
        private void post(HttpServletRequest request, HttpServletResponse response)
                throws ServletException, IOException {
            response.setContentType("text/html;charset=utf-8");
            String id=request.getParameter("id");
            System.out.println("id:"+id);
            PrintWriter out=response.getWriter();
            out.println("{name:'张三',age:14}");
            out.flush();
            out.close();
        }
    
    }

     

转载于:https://www.cnblogs.com/Cocoomg/p/9901338.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值