jquery ajax请求接口的实例介绍

通过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax()可以不带任何参数直接使用。

注意，所有的选项都可以通过$.ajaxSetup()函数来全局设置。

回调函数

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

jquery  API地址：https://jquery.cuishifeng.cn/jQuery.Ajax.html

	
	

		<!-- 表单部分 --> 
	
	

		<form action="#" onsubmit="return false" method="post" id="form"> 
	
	

		 
	
	

		  <input type="text" value="" placeholder="公司名称" id="lyname" name="name" required="required" style="float: left;" maxlength="20" class="mar_m" /> 
	
	

		 
	
	

		  <input type="text" value="" placeholder="您的手机" id="lytel" name="tel" required="required" style="float: right;" maxlength="11" id="phone" onblur="checkPhone()" /> 
	
	

		 
	
	

		  <div style="clear:both"></div> 
	
	

		 
	
	

		  <input type="text" name="remark" id="lyremark" value="" placeholder="留言内容" class="content" /> 
	
	

		 
	
	

		  <div id="" class='send'> 
	
	

		 
	
	

		    <button type="submit" onclick="login()">提交</button></div> 
	
	

		 
	
	

		</form> 
	
	

		 
	
	

		<!-- js部分 --> 
	
	

		// ajax表单提交 
	
	

		function login() { 
	
	

		// alert("remark:"+ $('#lyremark').val()+"name:"+ $('#lyname').val()+"tel:"+ $('#lytel').val()) 
	
	

		$.post("您的接口地址", { 
	
	

		 
	
	

		//获取用户输入的值，也是要传到后台的字段 
	
	

		remark: $('#lyremark').val(),   
	
	

		name: $('#lyname').val(), 
	
	

		tel: $('#lytel').val(), 
	
	

		 
	
	

		//以下为不需要获取的字段，留空即可 
	
	

		tel_spare: "", 
	
	

		source: "官网", 
	
	

		group: "", 
	
	

		record_user_name: "", 
	
	

		owner_name: "", 
	
	

		type: null, 
	
	

		record_user: null, 
	
	

		owner: null, 
	
	

		department: null 
	
	

		}, 
	
	

		 
	
	

		//请求成功之后执行的函数 
	
	

		function(result) { 
	
	

		console.log(result); 
	
	

		// 请求成功后把值清空 
	
	

		$('#lyremark').val(''); 
	
	

		$('#lyname').val(''); 
	
	

		$('#lytel').val(''); 
	
	

		 
	
	

		//提示信息 
	
	

		alert('您已提交成功！'); 
	
	

		}); 
	
	

		 
	
	

		}