码迷,mamicode.com
首页 > Web开发 > 详细

jQuery学习

时间:2019-09-21 23:20:17      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:charset   data   class   type   因此   servlet   代码   函数   的区别   

Ajax介绍

Ajax本身属于js内核中的一部分,jQuery是js的一个框架,是对js的封装,因此jQuery中也维护着Ajax的内容。

什么是同步,什么是异步?

  1. 同步现象
    客户端发送请求到服务器,当服务器返回响应前,客户端处于等待卡死状态
  2. 异步现象
    客户端发送请求到服务器,无论服务器是否返回响应,客户端都可以随意做其他事情,不会被卡死

Ajax的运行原理

页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到服务器端,在这段时间里,客户端可以进行任意操作,知道服务器端将数据返回给Ajax引擎后,会触发你设置的事件,从而执行自定义的js逻辑代码完成某种页面功能。

重点

jQuery是一个优秀的js框架,自然对js原生的ajax进行了封装,封装后的Ajax操作方法更简单,功能更强大,与Ajax操作相关的jQuery方法很多种,但开发中常用的有三种:

  1. $.get(url, [data], [callback], [type]);
    • String url:待载入页面的url地址
    • Map data(可选):待发送key/value参数
    • Function callback(可选):载入成功时的回调函数
    • String type(可选):返回内容格式,xml,html,script,json,text,_default
  2. $.post(url, [data], [callback], [type]);
  3. $.ajax({option1:value1,option2:value2});

测试jQuery是否引入成功的代码

$(function(){
        alert();
    });

get提交和post提交的区别有三点

  1. 请求参数位置不同
  2. get提交不安全,post提交相对安全
  3. get提交限制大小,post提交不限制大小

jQuery的get和post提交

post提交不用担心中文乱码,因为方法已经帮我们解决了。

jQuery的ajax方法

$.ajax({option1:value1,option2:value2});
常用的option如下:

  • async:是否异步,默认是true,代表异步
  • data:发送到服务器的参数,建议使用json格式
  • dataType:服务器端返回的数据类型,常用text和json
  • success:成功响应执行的函数,对应的类型是function类型
  • type:请求方式,GET/POST
  • url:请求服务器端地址

jQuery的Ajax技术:三种请求方式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery-ajax</title>

<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">

    function fn1(){
        // get异步访问
        $.get(
            "/web-ajax/ajaxServlet2",// 访问的url地址        
            {"name":"张三","age":18},// json格式的请求参数
            // 执行成功的回调函数
            function(data){
                alert(data.age);
            },
            // 返回数据的格式,也就是data的格式
            "json"
        );
    }
    
    function fn2(){
        // post异步访问
        $.post(
            "/web-ajax/ajaxServlet2",// 访问的url地址        
            {"name":"张三","age":18},// json格式的请求参数
            // 执行成功的回调函数
            function(data){
                alert(data.name);
            },
            // 返回数据的格式,也就是data的格式
            "json"
        );
    }
    
    function fn3(){
        // ajax异步访问
        $.ajax({
            // 访问的url
            url:"/web-ajax/ajaxServlet2",
            // json格式的请求参数
            data:{"name":"张三","age":18},
            // 请求方式
            type:"POST",
            // 请求成功的回调函数
            success:function(data){
                alert(data.name);
            },
            // 请求失败的回调函数
            error:function(){
                alert("请求失败");
            },
            // 预期服务器返回的数据类型
            dataType:"json",
            // 是否异步,默认为true
            async:true
        });
    }
</script>
</head>
<body>
    <input type="button" value="Ajax的get访问" onclick="fn1()"><br>
    <input type="button" value="Ajax的post访问" onclick="fn2()"><br>
    <input type="button" value="Ajax的ajax访问" onclick="fn3()"><br>
</body>
</html>

jQuery学习

标签:charset   data   class   type   因此   servlet   代码   函数   的区别   

原文地址:https://www.cnblogs.com/zxfei/p/11565174.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!