jquery ajax使用说明-马育民老师

# 依赖

首先要引入 `jquery.js` 文件

# ajax完整写法

```
$.ajax({
    url:'/add',//请求的url
    type:'POST', //请求方式，GET或POST
    async:true,    //可省略，默认为true，异步；false：同步
    data:{ //发送服务器的数据
        name:'李雷',
        age:25
    },
    timeout:5000,    //超时时间，可省略
    dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
    beforeSend:function(xhr){ //发请求前执行该方法，可省略
        console.log(xhr)
        console.log('发送前')
    },
    success:function(data,textStatus,jqXHR){ //statusCode是2xx 或 304时，执行该函数
        console.log(data)
        console.log(textStatus)
        console.log(jqXHR)
    },
    error:function(xhr,textStatus){ //statusCode是 2xx 或 304 以外的值时，执行该函数
        console.log('错误')
        console.log(xhr) // 封装错误信息
        // console.log(xhr.responseJSON) // json格式，ajax请求使用该对象
        // console.log(xhr.responseText) // 文本格式，普通请求使用该对象
        console.log(textStatus)
    },
    complete:function(){//请求完成后执行该函数，可省略
        console.log('结束')
    }
})
```

更多参数详细解释，参见：

- https://www.w3school.com.cn/jquery/ajax_ajax.asp
- https://www.runoob.com/jquery/ajax-ajax.html

### 常用写法

```
$.ajax({
    url:'/add',//请求的url
    type:'POST', //请求方式，GET或POST
    data:{ //发送服务器的数据
        name:'李雷',
        age:25
    },
    dataType:'json',  //返回的数据格式：json/xml/html/script/jsonp/text
    success:function(data,textStatus,jqXHR){ //statusCode是2xx 或 304时，执行该函数
        console.log(data)
        console.log(textStatus)
        console.log(jqXHR)
    },
    error:function(xhr,textStatus){ //statusCode是 2xx 或 304 以外的值时，执行该函数
        console.log('错误')
        console.log(xhr.responseJSON) // json格式，ajax请求使用该对象
    }
})
```

# get简化写法

格式：

```
$.get(URL,callback);
```

### 例子

```
$.get("/query",function(data,status){
	console.log("数据: " , data , ",状态: " + status);
});
```

# post简化写法

格式：

```
$.post(URL,data,callback);
```

### 例子

```
$.post("/add",
  {
    name:"李雷",
    age:20
  },
  function(data,status){
    console.log("数据: " , data , ",状态: " + status);
  }
);
```

# 例子

首先要引入jquery.js文件

```
<script src="js/jquery-1.11.0.min.js"></script>
```

### js部分

写在 引入jquery的下面

```
function doSubmit(){
	alert(1);//目的：判断该函数是否能正确的执行
	var name=$("#username").val();//jquery根据id值获取该控件的value值，#后面都是id值
	alert(name);
	$.ajax({
	    url:'reg/check',
	    type:'POST', //GET
	    data:{
	        'name':name
	    },
	    dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
	    success:function(data,textStatus,jqXHR){
	      	alert(data);  //如果不做处理，弹出的是object，原因就是json是对象
	      	alert(JSON.stringify(data));//将json对象转换为字符串
	      	if(data.code==1){//检验成功，查无此用户
	      		document.myform.submit();
	      	}else{
	      		alert('该用户已经存在');
	      	}
	    },
	    error:function(xhr,textStatus){
	        alert("对不起，发生错误！");
			console.log(xhr.responseJSON) // json格式，ajax请求使用该对象
	    }
	})
	
	
}
// 加载页面后执行下面函数
window.onload = function () {
	// 给按钮绑定click事件函数
	$("#sbt").click(doSubmit);
}
```

### html的部分

```
<form name="myform" action="reg/doReg" method="post">
	用户名:<input name="username" id="username"><br/>
	密码:<input name="password" id="password"><br/>
	<input type="button" value="注册" id="sbt">
</form>
```

传统方式：点击“注册”，提交表单，整个页面要刷新
ajax方式：点击“注册”，异步提交，判断用户名是否存在，如果存在就给出提示

原文出处：http://malaoshi.top/show_1IX2ln2IksNE.html