ajax实例分析

最新推荐文章于 2021-08-05 12:44:15 发布

我思故我在.

最新推荐文章于 2021-08-05 12:44:15 发布

阅读量276

点赞数 1

本文链接：https://blog.csdn.net/wy15027539821/article/details/90240916

版权

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

下面写一个实例来解释ajax

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<input type="text" id="bookNo" name="bookNo" />
<input type="button" onclick="getData()" value="查询"/>//写一个按钮来调用getData方法
<div id="a" ></div>
</body>
<script type="text/javascript">
function getData(){
	var data = $("#bookNo").val();//拿到id为bookNo输入框内的值
	var url = 'SearchServlet';//链接后台
	$.ajax({
	    type:"get",  //请求方式
	    url: url,     //请求地址  链接后台
	    data: {"bookNo":data},  //请求参数，将输入框内值以bookNo传给后台 
	    cache: false,   //去除缓存
	    async : false,   //同步
	    dataType: "JSON",
	    success: function (data ,textStatus, jqXHR)
	    {
	    	//请求成功之后，后台数据赋值给data参数
	    	viewList(data.d);
	    },
	    error:function (XMLHttpRequest, textStatus, errorThrown) {      
	      	//请求失败之后执行这个
	    	alert("请求失败了");
	    	alert(textStatus);
	    	alert(errorThrown);
	    }
	 });
}
//将json以一个表格的形势展示在在页面
function viewList(data){
	var html = '<table border = "2" height="100" width="200">';//写一个表头格式
	html+='<tr><th>bookNo</th><th>bookName</th><th>author</th><th>publish</th></tr>';//写进表头内容
	for(var i = 0; i < data.length; i++){
		
		html += '<tr> <td>' + data[i]['bookNo'] + ' </td><td>'+data[i]['bookName']+'</td><td>'+data[i]['author']+'</td><td>'+data[i]['publish']+'</td><td>';
	}
	html += '</table>';
	$("#a").empty().append(html);
	//在div id为a 里输出html
}
</script>
</html>

上面是写了一个前台页面，用ajax像后台提交数据，后台查询数据库然后将数据以json形式返还给前台。SearchServlet的写法为：

		response.setCharacterEncoding("utf-8");
		response.setContentType("application/json; charset=utf-8");//防止乱码
		String bookNo = request.getParameter("bookNo");
		String sql ="select * from book where bookNo = '"+bookNo+"'";
		List<Map<String,String>> show = mysqlUtil.show(sql,new String[]{"bookNo","bookName","author","publish"});
		//show是一个List类型（List是一个接口），List是由一个个Map组成，而Map又是一个个k，value组成的，其中k，value都是string类型
		String json = "{\"d\":[";
		for (Map<String,String> map : show) {
			//对show进行循环写出查询的每一个{"bookNo","bookName","author","publish"}
			json+="{\"bookNo\":\""+map.get("bookNo")+"\","
					+"\"bookName\":\""+map.get("bookName")+"\","
					+"\"author\":\""+map.get("author")+"\","
					+"\"publish\":\""+map.get("publish")+"\"},";
					System.out.println("bookNo:"+map.get("bookNo"));
		}
		json = json.substring(0, json.length() - 1);//去掉最后一个逗号
		json += "]}";
		System.out.println(json);
		response.getWriter().write(json);//将json返回给前台
	}

from表单可以直接将输入框的内容提交给后台，但是ajax需要data请求参数传给后台，

<form action="SearchServlet">			
<input type="text" name="pageNo" ></input>
<input type="submit"  value="跳转">

例如form表单可以直接将前台数据传输给后台，

String pageNo = request.getParameter("pageNo");

request.setAttribute("pageNo", pageNo);

后台可以将pageNo传回来，前台用${pageNo}接受即可，

我思故我在.

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax实例分析

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。下面写一个实例来解释ajax...
复制链接

扫一扫