码迷,mamicode.com
首页 > Web开发 > 详细

JQuery中Ajax的基本用法

时间:2018-05-11 20:05:41      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:end   参数   status   格式   script   lse   input   oob   type   

一、JSON对象与JSON字符串
JSON:轻量级的数据交换格式
1、JSON对象:JSON对象就是键值对的集合,键与值之间用:分隔,多对键值对之间用,分隔
注意:JSON对象,要求键必须使用""包裹的字符串。‘‘无效!!!
2、JSON字符串:将JSON对象,用字符串的形式进行包裹。

3、JSON对象与JSON字符串的相互转换:

  ① 对象-->字符串 JSON.stringify(obj)
  ② 字符串-->对象 JSON.parse(jsobj)

JQuery也提供了字符串转对象的方法:$.parseJSON(jsobj);

4、JSON数组:将多个JSON对象组成数组的形式存放
JSON数组可以和JSON对象相互嵌套,也就是说JSON对象的值可以是JSON数组。

.load():选中当前页面的一个DOM节点,并在当前DOM节点中加载一块HTML代码片段:
接受参数:
  ① 可以是一个HTML文件的地址,表示将整个的html文件加载到当前区域:
    $("div1").load("test.html");
  ② 可以是一个html文件+各种选择器,表示选择该页的指定区域进行加载
    $("#div1").load("test.html",h1,"ul",function(){alert("完成")});

二、$.ajax();是JQuery中最底层的ajax函数。参数接受一个大对象,用对象的键值对表示ajax请求的相关设置:
① type:表示Ajax请求的方法,可以get和post
② url:表示请求的后台URL地址
  $.ajax({
    type:"get",
    url:"java1801.json",
  data:{
  "name":"张三"
  },
  async:true,
  }

③ success:表示请求成功的回调函数。回调函数将接受三个参数,其中第一个参数是请求成功返回的数据。
  success:function(data,textStatus,jqXHR){
    var obj=JSON.parse(data);
    console.log(obj);
    console.log(data);
    console.log(textStatus);
    console.log(jqXHR);
    console.log(jqXHR.responseText);
    console.log(jqXHR.responseXML);
  },
使用数据时需注意:返回的对象是JSON字符串,还是JSON对象。
④ error:表示请求失败时,执行的回调函数。
  error:function(XMLHttpRequest,textStatus,errorThrow){
    console.log(XMLHttpRequest);
    console.log(textStatus);
    console.log(errorThrow);
  }
⑤ complete:请求完成后,无论成功失败都会执行的函数
  complete:function(XHR,TS){
    console.log(XHR.status);
    console.log(TS);
  }
⑥ statusCode: 接收一个对象,对象的键是各种status状态,对象的值表示每种状态码对应的回调函数。
  [常见状态码]
    200-请求成功
    404-页面没找到
    500-服务器错误
    403-访问被拒绝

  statusCode:{
    200:function(){
    console.log("请求成功");
  },
    404:function(){
    console.log("页面没找到");
    }
  }
⑦ async:设为true表示异步请求(默认),设为false表示同步请求

⑧ data:请求时,向后台传递的数据,是一个对象类型,以键值对的形式分别表示name:value。

⑨ dataType:预期服务器返回的数据类型。常见json、text、html

⑩ timeout:设置请求超时时间。

三、JS同源策略
在JS中当请求其他文件时,要求被请求文件与当前文件,必须处于同一协议名、同一主机名、同一端口号下。
否则,请求将不能成功!!如果要请求非同源文件,必须进行跨域请求设置

  $(function(){
    $.get("java1801.json",{name:"zhangsan"},function(data){
    console.log(data);
  },"json");

四、ajax中用于检测页面所有Ajax的状态,并执行回调函数的方法

  ajaxComplete(callback)
  ajaxError(callback)
  ajaxSend(callback)
  ajaxStart(callback)
  ajaxStop(callback)
  ajaxSuccess(callback)


五、表单序列化为字符串
  $("form input[type=‘button‘]:eq(0)").on("click",function(){
    //var str=$("form:eq(0)").serialize();
    //console.log(str);
    var userName=$("form input[name=‘userName‘]:eq(0)").val();
    var pwd=$("form input[name=‘pwd‘]:eq(0)").val();
    var obj={
      "userName":userName,
      "pwd":pwd
    };
    console.log(JSON.stringify(obj));
  });

六、表单序列化为数组
  $("form input[type=‘button‘]:eq(1)").on("click",function(){
    var arr=$("form:eq(0)").serializeArray();
    var obj={};
    arr.forEach(function(item,index){
      obj[item.name]=item.value;
    });
    console.log(JSON.stringify(obj));
  });

七、validate插件的使用
 插件下载:http://www.runoob.com/jquery/jquery-plugin-validate.html
 实例代码

 

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		.cls{
			color: red;
			font-size: 12px;
		}
	</style>
	<script src="js/jquery-1.10.2.js"></script>
	<script  src="js/jquery.validate.js"></script>
	<script  src="js/messages_zh.min.js"></script>		
</head>
<body>
	<form id="form">			
		用户名:<input type="text" name="userName"/><br/>
		密码:<input type="password" name="password" id="pwd"/><br/>
		确认密码:<input type="password" name="confirm_password" id="confirm_password"/><br/>
		邮箱:<input type="text" name="email"/><br/>
		<input type="submit" value="提交"/><br/>
	</form>
	<script type="text/javascript">
		$("#form").validate({
			errorPlacement: function(error, element) {  
   				error.insertAfter(element);
   				error.css({
					"color": "red",
					"fontSize": "12px",
					"position":"absolute",
					"right":"0px"
				})					
		},				
//		errorClass:"cls",
		rules:{
			userName:{
				required:true,
				rangelength:[3,16]
			},
			password:{
			        required:true,
        	                minlength:5
			},
			confirm_password:{
			        required:true,
        		        minlength:5,
				equalTo:"#pwd"
			}
		},
		messages:{
			confirm_password:{
			     equalTo: "两次密码输入不一致"
			}
		}
	});
	</script>
</body>       

  

 

JQuery中Ajax的基本用法

标签:end   参数   status   格式   script   lse   input   oob   type   

原文地址:https://www.cnblogs.com/hjcblog/p/9025521.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!