【Ajax】之jQuery中的Ajax

Ajax

1.jQuery中的Ajax

load()方法
异步请求的地址
异步请求的数据
异步请求成功后的回调函数
返回值服务器端的响应结果

<body>
<button>按钮</button>
<script src="js/jquery.js"></script>
<script>
    $('button').click(function(){

        $('button').load('data/server2.json', {name:'犬夜叉'}, function(){
            console.log('异步请求成功...');
        });
    });

</script>
</body>

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

$.get(url, data, callback, type)方法-请求方式GET
$.post()方法-请求方式POST
异步请求的地址
异步请求的数据
异步请求成功后的回调函数
设置服务器端响应结果的格式

<body>
<button>按钮</button>
<script src="js/jquery.js"></script>
<script>
    $('button').click(function(){

        $.get('data/server2.json', {name:'犬夜叉'}, function(response){
            console.log(response);
        }, 'json');

    });
</script>
</body>

ajax()方法

url；异步请求的地址
settings-对象类型
data - 发送给服务器端的请求数据
dataType-服务器端响应结果的格式
success-异步请求成功后回调函数

<body>
<button>按钮</button>
<script src="js/jquery.js"></script>
<script>
    $('button').click(function(){
        
        $.ajax('data/server2.json', {
            type : 'get',
            dataType : 'text',
            success : function(data){
                console.log(data);
            }
        });
    });
</script>
</body>

$.getScript方法

url；JavaScript文件url地址
callback；该文件成功加载后回调函数
`<body>
<button>按钮</button>
<script src="js/jquery.js"></script>
<script>

$('button').click(function () {
    // 动态加载指定JavaScript文件，并且执行
    $.getScript('data/server.js',function (data) {
        console.log(data);
        eval(data);
    });
});

</script>
</body>`

$.getJSON()方法

url；JavaScript文件url地址
data；发送个服务端key/value的数据内容
callback；该文件成功加载后回调函数

<body>
<button>按钮</button>
<script src="js/jquery.js"></script>
<script>
    $('button').click(function(){
        // getJSON()方法的请求方式为GET
        $.getJSON('data/server2.json', {name:'张无忌'},function(data){
            console.log(data);
        });
    });
</script>
</body>

2.异步提交表单

获取所有表单组件的数据值
并该数据值拼成指定的字符串和JSON格式的数据
并通过异步交互的方式提交表单

表单序列化

serialize()方法把表单组件数据值转换为字符串内容
serializeArray()方法把表单组件数据值转换为JSON的数据格式

<body>
<form action="#">
    <input type="text" name="username" is="name">
    <input type="text" name="password" is="pwd">
    <input type="submit">
</form>
<script src="js/jquery.js"></script>
<script>
    $('form').bind('submit',function (event) {
        event.preventDefault();
//        　阻止默认行为
        /*var data = $('form').serialize();*/
        var data = $('form').serializeArray();
//        根据表单默认同步提交获取数据方式
        console.log(data);
        $.post('data/server5.json',daa, function (response) {
//            通过异步交互提交表单
            console.log(response);
        });
    });
</script>
</body>

【Ajax】之jQuery中的Ajax

Ajax

1.jQuery中的Ajax

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

ajax()方法

$.getScript方法

$.getJSON()方法

2.异步提交表单

表单序列化

佐珥玎

引用和评论

AJAX是如何凭一己之力提高前端程序员的工资水平的？

《进阶篇第6章：vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource

第6章：Vue中的ajax（包含：回顾发送ajax请求方式、vue-cli脚手架配置代理服务器）

回顾前端页面发送ajax请求方式