• jquery中的几种常用总结


    $.load方法

    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    /*load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。
    url:你需要载入的代码的URL地址 语法形式如:url #some > selector 可以对html进行筛选
    data:(可选)参数的传递 语法形式如: {"argName":"argValue"} es:{"id":"123","sex":"男"}
    callback (可选)回调函数 
    这个方法默认使用 GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的。*/
    $(function(){
    var name = 'gaofei';
    $('#button1').click(function(){
    //get传参方法
    //$('#box').load('2.php?name'+name);
    
    //post传参方法
    $('#box').load('2.php',{name:name , password:'123'} , 
    //response传输对象
    function(response , status , xhr){
    //回调过来的值进行重新编写
    if(status == 'success')
    {
    $('#box').html(response+name);
    }
    else
    {
    $('#box').html(response);
    }
    
    });
    })
    })
    </script>

    <button type="button" name="button" id="button1">异步加载数据</button>
    <div id="box"></div>

      

    $.get方法

    <script type="text/javascript">
    /*
    get(url,data,callback,type) 
    前三个参数跟load参数相同
    type即服务器返回的内容格式:
    */
    $(function(){
    
    	/*//通过直接在url问号紧跟传参
    	$('#button1').click(function(){
    		var name = 'gaofei';
    		var password = '123';
    		$.get('2.php?name='+name+'&password='+password,function(response , status , xhr){
    			$('#box').html(response);
    		})
    	})*/
    
    
    	/*//通过第二个参数data,字符串形式的键值对传参,然后自动转换为问号紧跟传参
    	$('#button1').click(function(){
    		var name = 'gaofei';
    		var password = '123';
    		$.get('2.php','name='+name+'&password='+password,function(response , status , xhr){
    			$('#box').html(response);
    		})
    	})*/
    
    	/*//通过第二个参数data,对象形式的键值对传参,然后自动转换为问号紧跟传参
    	$('#button1').click(function(){
    		var name = 'gaofei';
    		var password = '123';
    		$.get('2.php',
    			{
    				name:name,
    				password:password
    			}
    			,function(response , status , xhr){
    			$('#box').html(response);
    		})
    	})*/
    
    
    })
    </script>
    </head>
    
    <body>
    <button type="button" name="button" id="button1">ajaxGET方法</button>
    <div id="box"></div>
    

      

    $.post方法

    <script type="text/javascript">
    //ajax post方法
    /*$.post()方法的使用和$.get()基本上一致,他们之间的区别也比较隐晦,基本都是背后的
    	不同,在用户使用上体现不出。具体区别如下:
    	1.GET 请求是通过 URL 提交的,而 POST 请求则是 HTTP 消息实体提交的;
    	2.GET 提交有大小限制(2KB) ,而 POST 方式不受限制;
    	3.GET 方式会被缓存下来,可能有安全性问题,而 POST 没有这个问题;
    	4.GET 方式通过$_GET[]获取,POST 方式通过$_POST[]获取。*/
    $(function(){
    
    	/*//通过第二个参数data,对象形式的键值对传参,然后自动转换为post传参
    	$('#button1').click(function(){
    		var name = 'gaofei';
    		var password = '123';
    		$.post(
    			'2.php',
    			{
    				name:name,
    				password:password
    			},
    			function(response , status , xhr){
    			$('#box').html(response);
    		})
    	})*/
    
    	/*//post最常用的方法
    	//通过第二个参数data , 字符串形式的键值对传参,自动转换为http消息实体传参
    	$('#button1').click(function(){
    		var name = 'gaofei';
    		var password = '123';
    		$.post(
    			'2.php',
    			'name='+name+'&password='+password,
    			function(response , status , xhr){
    				$('#box').html(response);
    			},
    			'html');	//php文件返回的数据是纯文本 默认为html或者text
    	})*/
    
    	/*//post最常用的方法
    	//通过第二个参数data , 字符串形式的键值对传参,自动转换为http消息实体传参
    	$('#button1').click(function(){
    		var name = 'gaofei';
    		var password = '123';
    		$.post(
    			'2.php',
    			'name='+name+'&password='+password,
    			function(response , status , xhr){
    				$('#box').html(response);
    			},
    			'json');
    		//本身返回的是纯文本,如果强行转换为xml或json数据格式,将会导致无法获取数据
    	})*/
    
    	
    })
    </script>
    

      

    $.ajax方法

    <script type="text/javascript">
    //$.ajax()是所有 ajax 方法中最底层的方法,所有其他方法都是基于$.ajax()方法的封装。
    //这个方法只有一个参数,传递一个各个功能键值对的对象。
    $(function(){
    	$('#button1').click(function(){
    		var name = $('#username').val();
    		$.ajax({
    			type:'POST',	//请求方式 POST OR GET
    			url:'2.php',	//请求地址
    			data:{			//发送到服务器的数据,键值对,字符串,对象
    				name:name,	
    			},
    			dataType:'json',
    			success:function(data){
    					if(data.err == 1)
    					{
    						roleerr('<strong>错误:</strong>  库中已经存在此用户名!');
    						return false;
    					}
    			}
    		})
    	})
    })
    function roleerr(a)
    {
    	$('#warningerrmsg').html(a);
    	$('#warningerr').show();
    	window.scrollTo(0,0);
    }
    </script>
    </head>
    
    <body>
    <div role="alert" id="warningerr" style="display: none;">
    			            <div id="warningerrmsg"><strong>错误:</strong> 角色名重复</div>
    			        </div>
    <form name="form1" id="form1" action="2.php" method="post">
    <h1>用户名:<input type="text" name="username" id="username"></h1><br />
    <h1>密码:<input type="text" name="password" id="password"></h1>
    <button type="button" name="button" id="button1">Ajax方法</button>
    </form>
    <div id="box"></div>
    

      

  • 相关阅读:
    父组件和子组件之间的生命周期执行顺序
    Vue生命周期四个阶段
    Vue watch监听
    Vue computed计算属性 理解
    Vue中v-if 与 v-show的区别
    虚拟DOM
    MVC与MVVM原理
    单例模式 回流与重绘
    判断某个对象属于哪种数据类型
    原生JS的兼容性问题
  • 原文地址:https://www.cnblogs.com/g825482785/p/ajaxpost.html
Copyright © 2020-2023  润新知