jQuery中的Ajax

最新推荐文章于 2024-09-18 23:27:31 发布

非线性定语从句

最新推荐文章于 2024-09-18 23:27:31 发布

阅读量100

点赞数

文章标签： ajax

本文链接：https://blog.csdn.net/weixin_44492275/article/details/108711959

版权

jQuery不仅对JavaScript语言进行封装，也对AJax异步进行封装了

jQuery提供了六个Ajax操作方法：

load()方法 $. g e t () 和$ .post() $.ajax() $. g e t S c r i p t () 和$ .getJSON()

jQuery封装提供的事件：

ajaxStart()和ajaxStop()

ajaxComplete() ajaxSend() ajaxError() ajaxSuccess()

load()方法

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

$element.load(url,[data],[callback]);
//url请求页面的url地址
//data发送给服务器的数据  键值对形式    可选
//callback Ajax请求完成后所执行的代码	可选

load()方法的请求方式由是否传递参数决定。即传递参数，为post方式；不传递参数为，get方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
</body>
<script src="../js/jquery-1.12.4.js"></script>
<script>
    $('button').click(function(){
        //url异步请求页面的url地址
        //data发送给服务器的数据  键值对形式    可选
        //callback Ajax请求完成后所执行的代码	可选  没有的时候为get    有的时候为post
        //它还有返回值  返回值为服务器响应的结果  会自动将返回结果写在目标元素的元素中
        $('button').load('server2.txt',{name:'wax'},function(){
            console.log('success....')
        })
    })
</script>
</html>

server2.txt文件

success   aaaaaa   xxxxxxx ......

$ .get()与$ .post()方法

$. g e t () 与$ .post()方法参数个数和作用一样：

$.get(url,[data],[callback],[type]);
//type 是设置返回的数据内容的格式   值为xml、html、JSON、text和_default

$.get()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>按钮</button>
</body>
<script src="../js/jquery-1.12.4.js"></script>
<script>
    $('button').click(function(){
        //请求方式为get
        //$.get(url,[data],[callback],[type]);
        //这个方法的返回值回来回调函数中  是回调函数的参数
        //type 是设置、指定返回的数据内容的格式  值为xml、html、JSON、text和_default
        
        $.get('server2.txt',{name:'xxx'},function(response){
            console.log(response)
        },'text');
    })
</script>
</html>

$.post()

//请求方式为post  其他跟$.get()一样

$.ajax()方法

这个是最底层的ajax方法

$.ajax(url,[settings]);
settings是key/value形式的请求设置 所有参数都是可选的  第一个参数后面都是settings   这个请求设置很多 所有他是更复杂的也是更灵活的

    $('button').click(function(){
        //$.ajax的第一个是url路径  第二个可选参数是个对象类型
        //第二个参数中比较常用的属性
        //type 设置请求方式   data发送个服务器的请求数据
        //dataType 服务器响应结果的格式
        //success 异步请求成功后的回调函数    他的函数的形式  function(data,textStatus,jqXHR){函数体}  data是服务器响应的结果 textStatus服务器当前的状态 jqXHRAJax中的核心对象 
        //
        $.ajax('server95.json',{
            type:'get',
            dataType:'text',
            success:function(data,textStatus,jqXHR){
                console.log(data,textStatus,jqXHR)
            }
        });
    })

$.getScript()方法

$.getScript()方法是jQuery中用于动态加载指定JavaScript文件并且执行该文件的代码

$.getScript(url,[callback]);
callback:  指定JavaScript文件加载成功后的回调函数

    $('button').click(function(){
        // $.getScript动态加载指定文件 并且执行该文件的代码
        //他的第二参数是 回调函数  回调函数有参数 这个参数是文件的内容 而且是字符串格式的    
        //第二个参数 回调函数是可选的 可以不写
       $.getScript('server95.js',function(data){
           console.log(data);
       })
    })

$.getJSON()方法

跟getScript类似只不过是加载JSON文件的

$.getScript(url,[data],[callback]);
data 是发送给服务器的key/value形式的数据内容

异步提交表单

表单的默认提交方式是同步的比如 form表单

但是异步提交表单在现在用的也比较多比如在一些网站中进行登录注册完成后并不会直接刷新整个页面只是局部作了变化这就是异步提交表单的应用场景之一

异步提交表单的步骤

异步提交表单是通ajax异步交互方式实现的，步骤：

1.获得表单及所有表单组件对应的数据值

2.将所有表单组件对应的数据值拼成特定格式的字符串或者JSON格式数据(因为发送的数据要是字符串的而且是特定格式的)

3.通过ajax异步交互方式提交表单

表单序列化

serialize()方法:将表单组件对应的数据序列化为指定格式的字符串内容就是改成符合发送请求的数据格式

$('form').serialize();

serializeArray()方法:将表单组件对应的数据值序列化为JSON格式的数据内容

$('select:radio').serializeArray();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#">
        <input type="text" name="username" id="name">
        <input type="text" name="password" id="pwd">
        <input type="submit" name="" id="">
    </form>
</body>
<script src="jquery-1.12.4.js"></script>
<script>
    
    $('form').bind('submit',function(event){
        event.preventDefault();//阻止默认行为
        //表单序列化   根据表单默认同步提交获取数据的方式  就是表单组件需要name  根据键值对来改变
        var data = $('form').serialize();
        //跟serialize一样 只不过是改为JSON格式
        var data1 = $('form').serializeArray();
        console.log(data,data1)
        //通过异步交互提交表单
        $.post('server95.json',data,function(response){
            console.log(response);
        });
    });

</script>
</html>