在JQuery中实现Ajax编程

Jquery中关于Ajax编程的一些方法:

<1>  load()方法

<2> $.get()方法

<3>  $.post()方法

<4>  $.getJSON()方法

<5>  $.ajax()方法

<1>调用load()方法可以动态地从服务器加载数据，并填充调用它的HTML元素的内容，语法如下：

#(选择器).load(url[, data ] [, complete(responseText,textStatus,XMLHttpRequest)] )

参数说明如下。

url：需要加载的资源的url。

data：可选参数，在提交请求时发送到服务器的数据对象或字符串。

complete(responseText,textStatus,XMLHttpRequest)：可选参数，请求结束后，调用的回调函数。示例:

<span style="font-size:18px;"><span style="font-size:18px;"><script type="text/javascript">
	$(document).ready(function(){
		$("button").click(function(){
			$('div').load('test.txt');
		});
	});
</script></span></span>

load()方法去是从缓存中加载数据而不是向服务器加载数据。因此，在调用load方法之前应该执行下面的代码方法禁止load方法调用IE缓存文件(注意是load()方法，而非之后的get、post方法，在这两个方法之前设置禁止缓存会报错)：

<span style="font-size:18px;"><span style="font-size:18px;">$.ajaxSetup({
cache:false
});
</span></span>

<2>使用$.get()方法可以通过HTTP GET请求从服务器加载数据，语法如下：

jQuery.get(url[, data ] [, success(data,textStatus,jqXHR)] [,dataType ] )

参数说明如下：

url：需要加载的资源的url。

data：可选参数，在提交请求时发送到服务器的数据对象或字符串。

success(data,textStatus,jqXHR)：可选参数，请求成功后，调用的回调函数。

可以看出来 $.get()方法是一个JQuery的全局函数，所以不能指定当前的选择器选择元素，然后填充，这里与上面的$().load有很大区别。

<span style="font-size:18px;"><span style="font-size:18px;"><script type="text/javascript">
	$(document).ready(function(){
		$("button").click(function(){
			$.get('test.txt',
				function(data){
					alert("获取的数据是"+data);
				});
		});
	});
</script></span></span>

<3>使用$. post ()方法可以通过HTTP POST请求从服务器加载数据，语法如下：

jQuery.post(url[, data ] [, success(data,textStatus,jqXHR)] [,dataType ] )

参数说明与$.get()方法的参数相同

也可以用这样的风格编写代码

<span style="font-size:18px;"><span style="font-size:18px;"><script type="text/javascript">
	$(document).ready(function(){
		$("button").click(function(){
			$.post('test.txt')
			.done(function(data){//表示post()方法执行完成之后的回调函数，或者写  .success(function());
				alert("获取的数据是"+data);
			});
		});
	});
</script></span></span>

<4>使用$.getJSON()方法可以通过HTTP GET请求从服务器加载JSON编码格式的数据，语法如下：

jQuery.getJSON(url[, data ] [, success(data,textStatus,jqXHR)] )

参数说明如下：

url：需要加载的资源的url。

data：可选参数，在提交请求时发送到服务器的数据对象或字符串。

success(data,textStatus,jqXHR)：可选参数，请求成功后，调用的回调函数。

<span style="font-size:18px;"><span style="font-size:18px;"><script>
$(document).ready(function(){
 	$("button").click(function(){
 		$.getJSON('edit.json')
 		.success(function( data ){
 			alert(data[0].src);
 		});
	});
});
</script></span></span>

<5>$.ajax()方法

()方法

调用$.ajax ()方法可以执行异步HTTP（Ajax）请求，语法如下：

jQuery.ajax(url[, settings ]

参数说明如下。

url：需要发送异步HTTP（Ajax）请求的url。

settings：用于配置Ajax请求的一组“键/值”对。

<span style="font-size:18px;"><span style="font-size:18px;"><script>
$(document).ready(function(){
 	$("button").click(function(){
 		htmlobj=$.ajax({
 			url:'jquery.js',
 			async:false
 		});
 	$('div').html(htmlobj.responseText);
	});
});
</script></span></span>

<6>利用ajax提交表单

<span style="font-size:18px;"><span style="font-size:24px;"><script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var formdata=new FormData();  
  $("button").click(function(){
    formdata.append('name', 'lee');
    formdata.append('age', 38);
    $.ajax({  
        type:'POST',  
        url:"ShowInfo.php",  
        data:formdata，

        contentType:false,  //必须false才会自动加上正确的Content-Type 
        processData:false  //必须false才会避开jQuery对 formdata 的默认处理 XMLHttpRequest会对 formdata 进行正确的处理 
    }).then(function(){  
        alert("ok");
    },function(){  
        alert("Failed");
    });  
    return false;  
});  
});
 </script>

服务器端为showInfo.php

<span style="font-size:18px;"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<?PHP 
		$file=@fopen("file.txt","a+");
		@fwrite($file,"username: " . $_POST['name'] . "; " . "age: " . $_POST['age']);
		@fclose($file);
?></span>

Ajax事件:

ajaxStart	全局事件	当开始一个ajax请求且没有其他ajax请求时触发
beforeSend	局部事件	ajax请求开始前触发
ajaxSend	全局事件	发送ajax请求时触发
success	局部事件	只有ajax请求成功时才触发（服务器没有返回错误，数据也没有错误）
ajaxSuccess	全局事件	ajax请求成功时触发
error	局部事件	ajax请求发生错误时触发
ajaxError	全局事件	ajax请求发生错误后触发
complete	局部事件	ajax请求完成时触发
ajaxComplete	全局事件	ajax请求完成时触发
ajaxStop	全局事件	当没有个更多的ajax请求时触发

ajax事件流:

局部事件只能在$.ajax()、$.get()、$.load()、$.getJSON()等方法中处理

<span style="font-size:18px;"><span style="font-size:24px;">$.ajax({
   beforeSend: function(){
     // Handle the beforeSend event
   },
   complete: function(){
     // Handle the complete event
   }
   // ......
 });</span></span>

全局事件可以在 document 对象上触发，并使用 bind() 方法绑定到处理函数

<span style="font-size:18px;"><span style="font-size:24px;">$(document).bind("ajaxSend", function(){
   $("#loading").show();
 }).bind("ajaxComplete", function(){
   $("#loading").hide();
 });</span>
</span>

为您的图片添加Fancybox效果:

注意要先引入Jquery包，以及Jquery插件:jquery.fancybox.js以及附带的css样式

<span style="font-size:18px;"><span style="font-size:24px;"><a href="image url" data-fancybox-group='gallery' class="test" ><image src="image url"></a>
</span></span>

<span style="font-size:18px;"><span style="font-size:24px;"><script type="text/javascript">
	$(document).ready(function(){
		$('.test').fancybox();
	});
</script></span></span>

转载于:https://www.cnblogs.com/peihao/p/5269145.html