JQuery AJAX

泠泠在路上

于 2017-01-20 21:54:29 发布

阅读量259

点赞数

分类专栏： AJAX 文章标签： ajax

本文链接：https://blog.csdn.net/u012396955/article/details/54633879

版权

AJAX 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JQuery AJAX

1.load(url,[data],[callback]):载入远程HTML文件代码并插入至DOM中
url (String):请求的HTML页的URL地址
data(Map) :(可选参数)发送至服务器的key/value数据
callback(callback):(可选参数)请求完成时（不需要是success的）回调函数

例子1：index.html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="result"></div>
        <button>click me</button>
    </body>

        <script src="jquery/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
        $(document).ready(function(){
            $('button').on('click',function(){
                var ajax_load="<img src='img/load.gif' alt='loading...'/>"
            var loadUrl='api/index.html';
            $('#result').html(ajax_load).load(loadUrl);

            });
        });     
    </script>
</html>

api下的index.html

<h1>hello</h1>
<h2>world</h2>

效果截图
这里写图片描述

例子2：index.html的JavaScript部分改成如下：

      <script type="text/javascript">
        $(document).ready(function(){
        $('button').on('click',function(){
       var ajax_load="<img src='img/load.gif' alt='loading...'/>"
        var loadUrl='api/index.html';
        $('#result').html(ajax_load).load(loadUrl+" #item2");
            });
        });     
    </script>

api下的index.html改成如下：

<ul>
    <li id="item1">列表1</li>
    <li id="item2">列表2</li>
</ul>

运行结果为：
这里写图片描述

2.jQuery.get(url,[data],[callback]):使用GET方式来进行异步请求
url (String):发送请求的URL地址
data(Map):(可选参数)要发送至服务器的数据，以key/value的键值对形式表示，会做为QueryString附加到请求URL中
callback(Function):(可选)载入成功时回调函数（只有当Response的返回状态是success才是调用该方法）

index.html中的内容：

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="result">before ajax</div>
        <button>click me</button>
    </body>

    <script src="jquery/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        $('button').on('click',function(){
        $.get("api",{Action:"get",Name:"zhanglm"},function(data,textStatus){
        alert(data);
                });
            });
        });     
    </script>
</html>

api里index.html中的内容：

{
name:'zhanglm1234',
type:'get'
}

运行结果为：
这里写图片描述

3.jQuery.post(url,[data],[callback],[type]):使用POST方式来进行异步请求
url (String):发送请求的URL地址
data(Map):(可选参数)要发送至服务器的数据，以key/value的键值对形式表示，
callback(Function):(可选)载入成功时回调函数（只有当Response的返回状态是success才是调用该方法）
type(String) :(可选)官方的说明是：Type of data to be sent，其实应该为客户端请求的类型（JSON,XML，等等）

4.jQuery.getScript(url,[callback]):通过GET方式请求载入并执行一个JavaScript文件
url(string):待载入JS文件地址
callback(function):(可选)成功载入后回调函数

index.html

<script type="text/javascript">
        $(document).ready(function(){
        $('button').on('click',function(){
        $.getScript("api/index.js",function(data,textStatus){
        alert(data);
                });
            });
        });     
    </script>

api下的index.js内容：

console.log('test getScript');

运行效果为：
这里写图片描述

5.jQuery Ajax事件
$.ajax({
url:post.php,
data:{},
type:’GET’,
dataType:’json’,
success:function(json){

},
error:function(xhr,status,errorThrown){
alert(‘sorry’);
},
complete:function(xhr,status){
alert(‘complete’);
},
beforeSend:function(){
},
cache:true/false
});

泠泠在路上

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery AJAX

JQuery AJAX1.load(url,[data],[callback]):载入远程HTML文件代码并插入至DOM中 url (String):请求的HTML页的URL地址 data(Map) :(可选参数)发送至服务器的key/value数据 callback(callback):(可选参数)请求完成时（不需要是success的）回调函数例子1：index.html代码<!DOCTYP
复制链接

扫一扫