JQuery AJAX

来源：互联网发布：手机注册淘宝账号编辑：程序博客网时间：2024/06/05 14:36

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