越来越少人用JQuery,但你就不学了吗?(5)

  1. 如需要跟多资料请点击下方图片⬇(扫码加好友→备注66)
    越来越少人用JQuery,但你就不学了吗?(5)_第1张图片

    Jquery Ajax

    $.ajax

    ​ jquery调用ajax方法:

    ​ 格式:$.ajax({});

    ​ 参数:

    ​ type:请求方式GET/POST

    ​ url:请求地址url

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

    ​ data:发送到服务器的数据

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

    ​ contentType:设置请求头

    ​ success:请求成功时调用此函数

    ​ error:请求失败时调用此函数

    get请求

    	async:true, 	success : function (msg) { 		var str = msg;
    		console.log(str); 		$('div').append("
      "
      ); for(var i=0; i<msg.prices.length;i++){ $('ul').append("
    • "
      ); $('li').eq(i).text(msg.prices[i]); } }, error : function (errMsg) { console.log(errMsg); $('div').html(errMsg.responseText); } }); ``` post请求 ```js $.ajax({ type:"post", data:"name=tom", url:"js/cuisine_area.json", contentType: "application/x-www-form-urlencoded", async:true, success : function (msg) { var str = msg; console.log(str); $('div').append("
        "
        ); for(var i=0; i<msg.prices.length;i++){ $('ul').append("
      • "
        ); $('li').eq(i).text(msg.prices[i]); } }, error : function (errMsg) { console.log(errMsg); $('div').html(errMsg.responseText) } }); ``` ### $.get ​ 这是一个简单的 GET 请求功能以取代复杂 $.ajax 。 ​ 请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。 ```js // 1.请求json文件,忽略返回值 $.get('js/cuisine_area.json'); ``` ```js // 2.请求json文件,传递参数,忽略返回值 $.get('js/cuisine_area.json',{name:"tom",age:100}); ``` ```js // 3.请求json文件,拿到返回值,请求成功后可拿到返回值 $.get('js/cuisine_area.json',function(data){ console.log(data); }); ``` ```js // 4.请求json文件,传递参数,拿到返回值 $.get('js/cuisine_area.json',{name:"tom",age:100},function(data){ console.log(data); }); ``` ### $.post ​ 这是一个简单的 POST 请求功能以取代复杂 $.ajax 。 ​ 请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。 ```js // 1.请求json文件,忽略返回值 $.post('../js/cuisine_area.json');
        $.post('js/cuisine_area.json',{name:"tom",age:100}); ```
        
        ```js // 3.请求json文件,拿到返回值,请求成功后可拿到返回值
        $.post('js/cuisine_area.json',function(data){ 	console.log(data);
        });					 ```
        
        ```js // 4.请求json文件,传递参数,拿到返回值	
        $.post('js/cuisine_area.json',{name:"tom",age:100},function(data){
        	console.log(data); }); ```
        
        ### $.getJSON
        
        ​	表示请求返回的数据类型是JSON格式的ajax请求
        
        ```js
        $.getJSON('js/cuisine_area.json',{name:"tom",age:100},function(data){
        	console.log(data); // 要求返回的数据格式是JSON格式 }); ```

      你可能感兴趣的:(乐字节,乐字节架构,乐字节java,ajax,js,jquery,javascript,python)