来自ajax请求的灵魂拷问（上），深入浅出带你解析ajax请求的各种适用场景

有人想写项目，却不知ajax请求从何发起，有人想搞数据交互，却不知ajax请求如何带参，有人被校验搞得焦头烂额，有人被js函数弄的力不从心。今天，我就带你从头到尾走一遍ajax请求的各种场景，如果你还不会写，请收藏这篇文章，随看随用。
场景1：怎么通过页面加载函数发送请求，以此获取到后台传输的数据？
前端代码

<div class="right-text-con">
		<p class="name">评论总数</p>
		<p><span class="color-org" id="evcount">4</span>数据<span class="iconfont">&#xe628;</span></p>	
</div>

我要通过后台查询出的具体数据替代现在这个页面上已经写死的这个4，此时发送的请求不携带任何参数，（适用场景，查找所有或查找记录数量）下面是js函数

$(function () {
				$.get("doctor/findevcountall",function(data){  //这里的data就是后台返回的值
					if(data == null ||data == ""){
						return "";
					}else{
						var str = data;					//接收data的值
						$("#evcount").text(str);   //利用text标签替换原来p标签中的内容
					}
				})
			});

场景二：怎么通过点击a标签或者按钮携带多个参数发送ajax请求？（适应场景，对数据库的增删改操作）前端代码如下

<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>患者姓名：</label>
				<div class="formControls col-sm-3">
					<input type="text" class="input-text" value=""  id="name" name="name">
				</div>
				<label class="form-label col-xs-1 col-sm-2"><span class="c-red">*</span>性别：</label>
				<div class="formControls col-xs-2 col-sm-3"> <span class="select-box">
				                    <select name="sex" class="select" id="sex">
				                	<option value="男">男</option>
				                	<option value="女" >女</option>
				                </select></span>
				</div>
			</div>
			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>家庭住址：</label>
				<div class="formControls col-sm-3">
					<input type="text" class="input-text" value=""  id="address" name="address">
				</div>
				<label class="form-label col-xs-1 col-sm-2"><span class="c-red">*</span>年龄：</label>
				<div class="formControls col-xs-2 col-sm-3">
					<input type="text" class="input-text" value="" id="age" name="age">
				</div>
			</div>
			<button id="save" class="btn btn-primary radius" type="button">保存</button>

先获取输入框的值，然后再通过点击事件发送请求

<script>
	$(document).ready(function(){
		$('#save').click(function () {				//使用jquery的id选择器，直接给按钮或a标签一个点击事件
			var data1 = getData(); 			//通过函数获取需要的值
				$.post('Patient/save',data1,function (data,status) {   //发送post请求，后台再给一个返回值
					if(data=="success"){
						alert("添加成功)；
						});
					}
				})
		});

		function getData() {
			var data = "";				//把需要的参数全部拼接起来
			data += "name="+ $('#name').val()+'&';
			data += "sex="+ $('#sex').val()+'&';
			data += "address="+ $('#address').val()+'&';
			data += "age="+ $('#age').val()+'&';
			return data;
		}
	});

</script>

场景三：怎么直接给a标签或按钮一个点击事件，让他发送ajax请求？（使用场景：需要携带的数据量很少的时候，比如只要获取id的删除或更新）前端代码如下

	<a style="color: red" "f()" ">确认删除</a>

js函数如下

<script>
		function f(){
			var id=$("#id").text();
			$.get("registration/okreg?id="+id,function(data){
				if(data == 'success'){
					alert('删除成功');
					window.location.reload();//当弹窗被点击确认后，同时刷新本页面
				}
			});
		}
	</script>

如果需要携带的不是一个参数而是两个或多个？

function f(){
			var id=$("#id").text();
			$.get("registration/okreg?id="+id+'&username='+username,function(data){
				if(data == 'success'){
					alert('删除成功');
					window.location.reload();//当弹窗被点击确认后，同时刷新本页面
				}
			});
		}
	</script>