首页 小组 问答 话题 好文 素材 用户 唠叨 我的社区

[分享]谈谈jQuery中Ajax那些事

九秘Lv.1种子选手
2024-09-24 20:20:27
0
40

jQuery中的Ajax

jQuery不仅对JavaScript语言进行了封装,也对Ajax异步交互进行了封装,jQuery提供了6个Ajax操作的方法:
1.load()方法
2.$.get()方法和$.post()方法
3.$.ajax()方法
4.$.getScript()方法和$.getJSON()方法
jQuery除了封装了六个Ajax操作的方法,还提供了一下几种事件:
1.ajaxStart()和ajaxStop()事件
2.ajaxComplete()事件、ajaxSend()事件、ajaxError()事件和ajaxSuccess()事件

  • load()方法

load()方法是jQuery中最为简单的Ajax方法

/*load(url,data,callback)方法
参数:
url:异步请求的地址
data:异步请求的数据
如果省略请求数据的话,当前的请求方式为GET
如果发送请求数据的话,当前的请求方式为POST
callback:异步请求成功后的回调函数
返回值:服务器端的响应结果
注意:自动将返回结果写入到目标元素中
 */
//html代码:
<button></button>
//JavaScript代码:
$('button').click(function(){
    $('button').load('data/server.json',function(){
        console.log('异步请求成功....');
    });
});
  • get()方法

/*
    $.get(url,data,callback,type)方法:请求方式为GET
    参数:
    url:异步请求的地址
    data:异步请求的数据
    callback:异步请求成功后的回调函数
    type:设置服务器端响应结果的格式
    xml、html、script、json、text等
*/
$.get('data/server.json',{name:'张三'},function(data){
    console.log(data);
},'json');
  • post()方法

/*
    $.post()方法:请求方式为POST
    参数:
    url:异步请求的地址
    data:异步请求的数据
    callback:异步请求成功后的回调函数
    type:设置服务器端响应结果的格式xml、html、script、json、text等
*/
$.post('data/server.json',{name:"张三"},fucntion(data){
    console.log(data);
},'json');
  • ajax()方法

/*
    $.ajax(url,[settings])方法
    参数:
    url:请求地址
    settings:设置异步请求的参数
    settings选项:对象类型
    type:设置请求方式
    data:发送给服务器端的请求数据
    dataType:服务器端响应结果的格式
    success:异步请求成功后的回调函数
    function(data,textStatus,jqXHR){}
    data:表示服务器响应的结果
    textStatus:表示服务器端当前的状态
    jqXHR:Ajax中的核心对象
*/
$.ajax('data/server.json',{
    type:'get',
    dataType:'text',
    success:function(data){
        console.log(data);
    }
});
  • getScript()方法

html代码:
<button>按钮</button>

JavaScript代码:
$('button').click(function(){
       //动态加载指定JavaScript文件,并且执行
    $.getScript('data/server.js',function(data){
        console.log(data);
    })
});
  • getJSON()方法

html代码:
<button>按钮</button>

JavaScript代码:
$('button').click(function(){
    //getJSON()方法的请求方式为GET
    $.getJSON('data/server.json',{name:'张三'},function(data){
        console.log(data);
    })
});
  • 表单序列化

专门针对表单的方法,可以快速获取表单input里面的value,但是必须在表单中添加name属性,否则获取不到

html代码:
<form>
    <input type='text'>
    <input type='password'>
    <input type='submit'>
</form>

JavaScript代码:
$('form').bind('submit',function(event){
    //阻止提交按钮的默认行为
    event.preventDefault();
    //表单序列化:根据表单默认同步提交获取数据的方式
    //var data=$('form').serialize();
    var data=$('form').serializeArray();
    //通过一部交互提交表单
    $,post('data/server,json',data,function(data){
           console.log(data);
    });
});
九秘
九秘

18 天前

签名 : 我常驻在>https://www.huaqu.club/ask   40       0
评论
站长交流