zoukankan      html  css  js  c++  java
  • 越来越少人用JQuery,但你就不学了吗?(5)

    如需要跟多资料请点击下方图片⬇(扫码加好友→备注66)
    image

    Jquery Ajax

    $.ajax

    ​ jquery调用ajax方法:

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

    ​ 参数:

    ​ type:请求方式GET/POST

    ​ url:请求地址url

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

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

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

    ​ contentType:设置请求头

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

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

    get请求

    $.ajax({
    	type:"get",
    	url:"js/cuisine_area.json",
    	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.json",
    	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)
    	}
    });
    

    $.get

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

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

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

    $.post

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

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

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

    $.getJSON

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

    $.getJSON('js/cuisine_area.json',{name:"tom",age:100},function(data){
    	console.log(data); // 要求返回的数据格式是JSON格式
    });
    
  • 相关阅读:
    《WF编程》系列之17 工作流与外部事件:工作流参数 居然有两个多月没有更新WF笔记,这段时间也许真的太忙了,毕业的事情,工作的事情,从今天起继续更新.
    《WF编程》系列之13 XAML激活 2.3.3 XAML激活
    《WF编程》系列之9 编译工作流:使用WFC.EXE
    《WF编程》系列之11 编译工作流:使用MSBUILD
    《WF编程》系列之15 顺序工作流与SequenceActivity 3 顺序工作流
    《WF编程》系列之16 工作流与外部世界:生存周期事件 3.2 工作流与外部世界
    windows2003技巧
    ASP.NET ViewState 初探
    FreeTextBox实现机制
    .NET实用设计模式:工厂模式(Factory)
  • 原文地址:https://www.cnblogs.com/lezijie/p/13255677.html
Copyright © 2011-2022 走看看