ＨＴＭＬ＋AJAX实现增，根据ＩＤ查

最新推荐文章于 2022-09-11 10:51:06 发布

郝瑞林

最新推荐文章于 2022-09-11 10:51:06 发布

阅读量1.7k

点赞数

分类专栏：ＡＪＡＸ

本文链接：https://blog.csdn.net/qq_43745587/article/details/103444310

版权

ＡＪＡＸ专栏收录该内容

1 篇文章 0 订阅

订阅专栏

AJAX:基本的步骤！
$.ajax({
type : “get”,//请求方式
url : “http://localhost:8081/getAllType”,//后台接口
dataType:‘json’, //预期的服务器响应的数据类型
data:{
tid:test1,
},//接口需要传入参数用此段代码

案例一

用AJAX+HTML实现根据ID查询

Controller层

TypeBean:
int tid
String type

	// 根据id查，
	@RequestMapping(value = "getAllType")
	@ResponseBody
	public String getAllType(Integer tid) {
		TypeBean data = typeService.getAllTypeService(tid);
		System.out.println("执行了改查询方法！");
		// 将实体类类型转换成json数据格式
		String jsonString = JSON.toJSONString(data);
		return jsonString;
	}
	
	// 根据id查的访问路径
	@RequestMapping("getAlltoPage")
	public String getAlltoPage() {
		return "listType";

	}

前台页面显示

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引这个js需要网 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<style>
#text{
 border-collspace:collspace;
 };
 tr{
  height:35px;
  
 }
</style>
<body>
<button class="btn">查询</button>
<table id="text">
<!-- 规定这是个头 -->
<thead>
                       <tr>
                            
                            <th>设备类型</th>
                            <th>设备Id</th>
                       
                        </tr>
         </thead>       
                 
 <!-- 这里存放拼接好的值-->
                 <tbody id="content">
                 
                 </tbody>
                    </table> 
                    <from>
                    <input type="text" name="tid" id="tid" >
                    </from>

</body>

<script type="text/javascript">
//根据id查
$(".btn").on("click" , function() {
	var test1=$("#tid").val();
	            $.ajax({
		            type : "get",//请求方式
	                url : "http://localhost:8081/getAllType",//后台接口
	                dataType:'json', //预期的服务器响应的数据类型
	                //接口需要传入参数用此段代码！       
   	            	data:{
	            	  tid:test1,
	                 }, 
	                success : function(data) {   //如果请求成功，返回数据。
	                console.log(data);//在控制打印数据
	                var html = "";
	                  html = "<tr>"+
	                   "<td>"+data.tid+"</td>"+
	                   "<td>"+data.type+"</td>"+
	                   "</tr>";
	                   $("#content").html("");
	                   $("#content").append(html);
	                   $("#test").html(html); //在html页面id=test的标签里显示html内容
	               }
	            })
	        })
</script>

</html>

案例二

用HTML+AJAX实现添加方法
判重名，添加成功返回提示信息

Controller层

	// 添加类型

	@RequestMapping(value = "addType")

	@ResponseBody
	public void addType(String type,HttpServletRequest req, HttpServletResponse resp) throws IOException {
	    resp.setCharacterEncoding("utf-8");
		System.out.println("..." +type);
		String info = "";
		Map<String, String> map = new HashMap();
		if (type!=null) {
			//typeService.addTypeService(typeBean);
			if(type.equals("A类"))
			info = "该名称已存在";
			else {
			info="该名称可用";
			}
		} else {
			info = "名字不可为空！";
		}
	
		map.put("info", info);
		//异步 
        PrintWriter writer = resp.getWriter();
        writer.print(JSON.toJSON(map));
        writer.flush();
        writer.close();
	}
	// 访问添加的页面
	@RequestMapping(value = "addTypetoPage")
	public String addTypetoPage() {
		return "addType";
	}

前台页面

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引这个js需要网 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<style>
#text {
	border-collspace: collspace;
}

;
tr {
	height: 35px;
}
</style>
<body>
	<button class="btn">添加</button>


	<from> <input type="text" name="type" id="tid">
	<table id="text">
		<tbody id="content">
		</tbody>
	</table>
	</from>

</body>

<script type="text/javascript">
//根据id查
$("#tid").on("blur" , function() {
	var test1=$("#tid").val();
	            $.ajax({
		            type : "get",//请求方式
	                url : "http://localhost:8081/addType",//后台请求的数据
	                dataType:'json', //预期的服务器响应的数据类型
	                //接口需要传入参数用此段代码！          
   	            	data:{
	            	  type:test1
	                 }, 
	                success : function(data) {   //如果请求成功，返回数据。
	                console.log(data);
	               // alert(data.info)
	              var html = "";
	                   html = "<tr>"+
	                   "<td>"+data.info+"</td>"+
	                   "</tr>"; 
	                   $("#content").html("");
	                   $("#content").append(html);
	                   $("#test").html(html); //在html页面id=test的标签里显示html内容 
	               }
	            })
	        })
</script>

</html>

目前欠缺：
AJAX：　
１.如何遍历后台集合
２.ｊｓ基础很薄弱。

郝瑞林

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
ＨＴＭＬ＋AJAX实现增，根据ＩＤ查

AJAX:基本的步骤！$.ajax({type : “get”,//请求方式url : “http://localhost:8081/getAllType”,//后台接口dataType:‘json’, //预期的服务器响应的数据类型data:{tid:test1,},//接口需要传入参数用此段代码案例一用A...
复制链接

扫一扫