ajax请求后端接口小demo

68 阅读 0 评论 45 点赞

我是靠谱客的博主高挑早晨，最近开发中收集的这篇文章主要介绍ajax请求后端接口小demo，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

ajax请求后端接口小demo

ps:使用的jquery的ajax的请求方式

ajax的get请求

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$.ajax({
		url:"http://localhost:55555/api/user/findAll",success:function(data,status){
			var obj = data;
			var str = '';
			
			for(i = 0;i<obj.length;i++){
				str+='<tr>'+'<td>'+obj[i].id+'</td>'+'<td>'+obj[i].name+'</td>'+'<td>'+obj[i].companyName+'</td>'+'</tr>';		
			}
			$("tbody").html(str);
		}});
	});
});
</script>
</head>
<body>

<button>获取其他内容</button>

<table class="table table-hover">
	<caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>id</th>
         <th>名字</th>
         <th>公司</th>
      </tr>
   </thead>
   <tbody>
   </tbody>
</table>
</body>
</html>

ajax的post请求

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</script>
<script>

</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 发送文本内容</h2></div>


<script>
	$(document).ready(function(){
			$("button").click(function(){
					 var json_obj = {id: 7,companyId: "3",companyName: "百度",name: "wangwu",nickName: "wu",password: "567",status: "0"};
					 var json_str = JSON.stringify(json_obj);
					 $.ajax({
						//规定请求的类型（GET 或 POST）
						type: "post",
						//预期的服务器响应的数据类型，注:如果返回的数据和预期的不一致会导致回调函数不执行
						//dataType: "json",
						//请求的路径
						url: "http://localhost:55555/api/user/insert",
						//发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"
						contentType: "application/json;charset=UTF-8",
						//	规定要发送到服务器的数据。
						data: json_str,
						// 	当请求成功时运行的函数
						success: function (data) {
							alert("请求成功！！！");
							if (data.error == 0) {
								alert();
							} else {
								alert(data.error + " " + data.msg);
							}
						}
					});
			});
	});
</script>
<div>
<button>点击我发送请求</button>
</div>
</body>
</html>