最简单的js实现ajax的方法 (jquery ajax详细教程)

1、$.ajax

jquery调用ajax方法:

格式:$.ajax({});

参数:

type:恳求方式GET/POST

url:恳求地址url

async:是否异步,默认是true表示异步

data:发送到服务器的数据

dataType:预期服务器返回的数据类型

contentType:设置恳求头

success:恳求成功时调用此函数

error:恳求失败时调用此函数

get恳求

$.ajax({
    type:"get",
    url:"js/cuisine_area.js?1777984560.734 on",
    async:true,
    success : function (msg) {
        var str = msg;
        console.log(str);
        $('div').append("<ul></ul>");
        for(var i=0; i<msg.prices.length;i++){
            $('ul').append("<li></li>");
                $('li').eq(i).text(msg.prices[i]);
        }
    },
    error : function (errMsg) {
        console.log(errMsg);
        $('div').html(errMsg.responseText);
    }
});

post恳求

$.ajax({
    type:"post",
    data:"name=tom",
    url:"js/cuisine_area.js?1777984560.734 on",
    contentType: "application/x-www-form-urlencoded",
    async:true,
    success : function (msg) {
        var str = msg;
        console.log(str);
        $('div').append("<ul></ul>");
        for(var i=0; i<msg.prices.length;i++){
            $('ul').append("<li></li>");
            $('li').eq(i).text(msg.prices[i]);
        }
    },
    error : function (errMsg) {
        console.log(errMsg);
        $('div').html(errMsg.responseText)
    }
});

2、$.get

这是一个简单的 GET 恳求功能以取代复杂 $.ajax 。

恳求成功时可调用回调函数。如果需求在出错时履行函数,请使用 $.ajax。

// 1.恳求json文件,忽略返回值
$.get('js/cuisine_area.js?1777984560.734 on');                  
// 2.恳求json文件,传递参数,忽略返回值
$.get('js/cuisine_area.js?1777984560.734 on',{name:"tom",age:100}); 
// 3.恳求json文件,拿到返回值,恳求成功后可拿到返回值
$.get('js/cuisine_area.js?1777984560.734 on',function(data){
    console.log(data);
}); 
// 4.恳求json文件,传递参数,拿到返回值    
$.get('js/cuisine_area.js?1777984560.734 on',{name:"tom",age:100},function(data){
    console.log(data);
});

3、$.post

这是一个简单的 POST 恳求功能以取代复杂 $.ajax 。

恳求成功时可调用回调函数。如果需求在出错时履行函数,请使用 $.ajax。

// 1.恳求json文件,忽略返回值
$.post('../js/cuisine_area.js?1777984560.734 on');                  
// 2.恳求json文件,传递参数,忽略返回值
$.post('js/cuisine_area.js?1777984560.734 on',{name:"tom",age:100});
// 3.恳求json文件,拿到返回值,恳求成功后可拿到返回值
$.post('js/cuisine_area.js?1777984560.734 on',function(data){
    console.log(data);
});                 
// 4.恳求json文件,传递参数,拿到返回值    
$.post('js/cuisine_area.js?1777984560.734 on',{name:"tom",age:100},function(data){
    console.log(data);
});

4、$.getJSON

表示恳求返回的数据类型是JSON格式的ajax恳求

$.getJSON('js/cuisine_area.js?1777984560.734 on',{name:"tom",age:100},function(data){
    console.log(data); // 要求返回的数据格式是JSON格式
});

本文是全套java入门到架构师教程之前端开发部分-jQuery的教学文档,如需全套前端或java入门到架构师教程请留言或私信。