JQuery基础_Ajax

  • Ajax:
    • AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
    • 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
  • 局部刷新好处:
    • 只更新部分页面,有效利用带宽,减轻服务器负担。
    • 提供类似C/S(即客户/服务器-应用程序)的交互效果,操作方便,连续性强。
    • 使用异步方式和服务器通信,无需打断用户操作。
      这里我们只介绍jquery中封装好的方法

1、**$.post(url,[data],[fn],[type])**

  • 通过远程TTP GET请求载入信息
  • 这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。
  • 如果需要在出错时执行函数,请使用 $.ajax。
  • 参数:
    • url:待载入页面的URL地址
    • data:待发送 Key/value 参数。
    • callback:载入成功时回调函数。
    • type:返回内容格式,xml, html, script, json, text, _default。
    • 例子:
 //body里面的代码
 <body>
    <center>
   用户名:<input type="text" name="username" id="username"/></br>
   密 码:<input type="text" name="password" id="password"/></br>
        <button onclick="checkUser()">查询</button>
    </center>
  </body>
function checkUser()
        {

            var username=$("#username").val();
            var password=$("#password").val();
            //得到表单中填写的用户名和密码
            $.post("UserServlet",{username:username,password:password},function(data){
    //这里用post方式请求,第一个参数请求地址是UserServlet,第二个参数发送两个对象 一个用户名 一个密码, Key/value形式保存数据。第三个参数是回调函数,里面可以给参数,data返回的是后台向页面传过来的数据
                if(data=="1"){
                //data是UserServlet返回的
                    alert("不存在");
                }else{
                    alert("存在");
                }
            });
        }
//UserServlet类:

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        String username=request.getParameter("username");
        String password=request.getParameter("password");
//得到请求过来的用户名和密码
        System.out.println(username);
        System.out.println(password);
        User user= UserDao.getInstance().getAllUser(username,password);
//调用UserDao里面的查询方法向数据库中查询用户名和密码是否存在。
        if(user==null){
        //如果不存在,返回1,这里的"1"就是$.post请求中毁掉函数里面的data
            out.print("1");
        }else{
        //如果不存在返回"0"
            out.print("0");
        }


    }

页面:
这里写图片描述
这样就在不重新加载页面的情况下完成了异步请求。

2、**$.get(url,[data],[fn],[type])**

 get方法和post是一样的用法,只是请求方式不同。

后面再介绍复杂一点的 $.ajax(url,[settings]) 方法。
参考地址:JQuery_Ajax

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值