jQuery -- $('').load()、$.get()、$.post()、$.ajax

清疚 2024-02-18 17:54 46阅读 0赞

w3school网址：http://www.w3school.com.cn/jquery/jquery\_ref\_ajax.asp

A、局部方法load():因为需要绑定在jQuery对象上，默认请求方式是get方式，如果请求数据为对象，则为post提交。

load(url,\[data\],function(response,status,xhr))

例：

$(function(){
      $('input').load('http://localhost:1337/login',function(response,status,xhr){
    	  $('#box').html(response);
      });
    });
    
    //post提交：
    $(function(){
      $('input').load('http://localhost:1337/login',{id:2},function(response,status,xhr){
    	  $('#box').html(response);
      });
    });

B、$.post():多了一个type参数：xml、html、script、json、jsonp、text

jQuery.post(url,data,success(data,textStatus, jqXHR),dataType)，其中url必选，其他参数可选

dateType规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script或 html）。

例：

$.post('http://localhost:1337/login',{id:2},function(response,status,xhr){
    	  $('#box').html(response);
      },'html')

C、$.get();

$.get(url,data,success(response,status,xhr),dataType) //utl参数必选，请求成功则执行回调函数，若要在请求失败执行error函数，则使用$.ajax()

等价于：

$.ajax(\{

url: url,

data: data,

success: success,

dataType: dataType

\});

例：$.get('http://localhost:1337/login',{id:2,user:"zhangsan"},function(response,status,xhr){
    	  $('#box').html(response);
      },'html');   //参数均会出现在url地址栏中

D、$.getJSON():使用 HTTP GET 请求从服务器加载 JSON编码数据。与$.get()都是get请求

jQuery.getJSON(url,data,success(data,status,xhr))

等价于：

$.ajax(\{

url: url,

data: data,

success: callback,

dataType: json

\});

例：

$('input').click(function(){
      $.getJSON('http://localhost:1337/login',function(response,status,xhr){
    	$('#box').html(response.user);
      });
    
      // $.ajax({
      // 	url:"http://localhost:1337/login",
      // 	success:function(data){
      // 		alert(data.id)
      // 		$('#box').html(data.id);
      // 	},
      // 	error:function(){
      // 		alert('抱歉 失败了')
      // 	},
      // 	dataType: "json"
      // })
     })

有时候不需要加载页面的时候就加载javascript，这时可以使用$.getScript()，即用即加载

E、$.getScript():使用 HTTP GET请求从服务器加载 JavaScript文件，然后执行该文件。

jQuery.getScript(url,success(response,status))

等价于：

$.ajax(\{

url: url,

dataType: "script",

success: success

\});

例：

$('input').click(function(){
      $.getScript('http://localhost:1337/login',function(response,status){
    	$('#box').html(response);
      });
    
      //等价于
      $.ajax({
      	url:"http://localhost:1337/login",
      	success:function(data){
      		$('#box').html(data);
      	},
      	error:function(){
      		alert('抱歉 失败了')
      	},
      	dataType: "script"
      })
     })

F 、 $.ajax() 可以实现以上方法能够做到的功能

例：
    $('input').click(function(){
      $.ajax({
      	type:'post',
      	url:"http://localhost:1337/login",
      	data:{id:1,user:"zhangsan"},
      	success:function(data,status,xhr){
      		$('#box').html(data);
      	},
      	error:function(){
      		alert('抱歉 失败了')
      	},
      	dataType: "html"
      })
     })

表单数据提交：

$("form input[type=button]").click(function(){
     	$.ajax({
     		type:'post',
     		url:'http://localhost:1337/login',
     		data:{
     			user:$('input[name=user]').val()
     		},
     		success:function(data,status,xhr){
     			alert('成功提交')
     		}
     	})
     })
    若提交参数过多，可以通过表单序列化完成serialize():
    $("form input[type=button]").click(function(){
     	$.ajax({
     		type:'post',
     		url:'http://localhost:1337/login',
     		data:{
     			user:$('form').serialize()   //表单序列化
     		},
     		success:function(data,status,xhr){
     			alert('成功提交')
     		}
     	})
     })

$(‘’).ajaxStart()和 $(‘’).ajaxEnd()分别在ajax请求之前和数据加载完成之后响应

可以用来做等待时的提示界面：

$(document).ajaxStart(function(){
     	$('#myloading').show()
     }).ajaxStop(function(){
     	$('#myloading').hide();
     })
    
    error提示：
    $("form input[type=button]").click(function(){
     	$.ajax({
     		type:'post',
     		url:'http://localhost:1337/login',
     		data:{
     			user:$('form').serialize()   //表单序列化
     		},
     		success:function(data,status,xhr){
     			// alert('成功提交')
     		},
     		error:function(xhr,errorText,info){
                 alert(errorText)
                 alert(info)
     		}
    
     	})
     })
    对于$.post()请求，可以使用局部.error()方法提示错误
           $.post('http://localhost:1337/login',function(){
           	  alert('成功')
           }).error(function(){
              alert('出错了')
           })
    也可以使用全局方法：$(‘’).ajaxError(callback)