seamplezeus
seamplezeus

自动下拉框，仿百度

下面给大家分享下自己的拙作，希望大家多点评下。

本网站前端采用的JSP，后台为Servlet模块。

数据库采用流行的MySQL。

在实现功能之前，应该了解一下基本的原理。


首先是要知道对表单的输入框的响应事件。

Javascript中有onpropertychange(IE支持)和oninput(FF等)

对于IE来说，可以这样来实现:

 

[javascript] view plain copy print ?
  1. <script type="text/javascript">  
  2. document.getElementById('myinput').attachEvent('onpropertychange',function(o){      
  3.         if(o.propertyName =='value') {  
  4.             //doSth  ex. alert(myinput.value);   
  5.             }  
  6.             });  
  7. </script>  
<script type="text/javascript">
document.getElementById('myinput').attachEvent('onpropertychange',function(o){    
      	if(o.propertyName =='value') {
      		//doSth  ex. alert(myinput.value);
      		}
      		});
</script>

 


对于非IE浏览器，如Google Chrome,可以利用下面的代码:

 

[javascript] view plain copy print ?
  1. <script type="text/javascript">  
  2. document.getElementById('myinput').addEventListener( "input",function(o) {  
  3.             //doSth   
  4.             // ex. alert(myinput.value);                       
  5.             },false);  
  6. </script>  
<script type="text/javascript">
document.getElementById('myinput').addEventListener( "input",function(o) {
			//doSth
        	// ex. alert(myinput.value);  				  	
  		  	},false);
</script>


这样，我们就可以动态地取得用户输入的内容。通过AJAX的异步交互，将信息传递给Servlet处理，

 

Servlet连接数据库，得到匹配的信息,返回给页面。

 

在数据库中，可以这样模糊查询:

 

[sql] view plain copy print ?
  1. SELECT * FROM table_name WHERE column_name = 'content%';  
SELECT * FROM table_name WHERE column_name = 'content%';


如果匹配多个字符则用"%"，单个字符用"_"。

 


**************************************************************************************

                                     中文乱码问题

另外，由于我们是利用JS取得用户的数据，因此如果含有中文信息会乱码，

我们可以利用JS里的函数库来处理乱码内容:

encodeURI() 或者     encodeURIComponent(uriComponent)

（调用一次还是会乱码，网上有人说要两次掉要该方法就可以解决问题，即encodeURI(encodeURI()))

在Servlet对得到的信息解码:

URLDecoder.decode(request.getParameter("msg","UTF-8"));

 

这样，我们就解决了中文乱码问题.

***************************************************************

整个流程大概如下：

下面给出一些关键代码:

 

首先是数据库:

创建数据库:

 

[sql] view plain copy print ?
  1. CREATE DATABASE autoComplete;  
CREATE DATABASE autoComplete;


接着创建表:

 

 

[sql] view plain copy print ?
  1. Create Table: CREATE TABLE `hotwords` (  
  2.   `id` int(11) NOT NULL AUTO_INCREMENT,  
  3.   `msg` text,  
  4.   PRIMARY KEY (`id`)  
  5. ) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8   
Create Table: CREATE TABLE `hotwords` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `msg` text,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=10 DEFAULT CHARSET=utf8


再随机插入一些数据：

 

如图:

 

[plain] view plain copy print ?
  1. mysql> select * from hotwords;  
  2. +----+---------+  
  3. | id | msg     |  
  4. +----+---------+  
  5. |  1 | china   |  
  6. |  2 | chinese |  
  7. |  3 | cake    |  
  8. |  4 | cub     |  
  9. |  5 | chaos   |  
  10. |  6 | chicken |  
  11. |  7 | 陈旭    |  
  12. |  8 | 陈龙    |  
  13. |  9 | 陈滟龙  |  
  14. +----+---------+  
  15. 9 rows in set (0.00 sec)  
mysql> select * from hotwords;
+----+---------+
| id | msg     |
+----+---------+
|  1 | china   |
|  2 | chinese |
|  3 | cake    |
|  4 | cub     |
|  5 | chaos   |
|  6 | chicken |
|  7 | 陈旭    |
|  8 | 陈龙    |
|  9 | 陈滟龙  |
+----+---------+
9 rows in set (0.00 sec)

 

 

接下来是JSP页面:

index.jsp:

 

[html] view plain copy print ?
  1. <%@ page contentType="text/html; charset=UTF-8" %>  
  2. <html>  
  3.     <head>  
  4.         <title>自动提示框</title>  
  5.     <style type="text/css">  
  6.     .mystyle  
  7.     { background:white none repeat scroll 0 0;  
  8.       border:1px solid black;  
  9.       cursor:default;  
  10.       font-size:13px;  
  11.       line-height:17px;  
  12.       margin:0;  
  13.       z-index:99;   
  14.       width:150px;  
  15.       left:10px;  
  16.       top:10px;   
  17.       visibility: hidden;  
  18.       }  
  19.     </style>  
  20.     </head>  
  21.     <body>  
  22.   
  23.         <img src="pics/baidu_sylogo1.gif"/>  
  24.         <form>  
  25.             <input type="text" name="myinput" id="myinput" autocomplete="off"/>  
  26.   
  27.             <input type="submit" value="百度一下" />  
  28.         </form>  
  29.           
  30.                     <div id="aaa" class="mystyle"></div>  
  31.     </body>  
  32.     <script type="text/javascript">     
  33.     <!--      
  34.         var xmlHttp; //XMLHttpRequest对象  
  35.           
  36.         //判断浏览器类型  
  37.         function isIE() {  
  38.         if(navigator.userAgent.indexOf( "MSIE")>0) {  
  39.         return true;  
  40.         }  
  41.         }  
  42.           
  43.         //定义表单内容改变事件  
  44.         if(isIE()) {  
  45.         document.getElementById('myinput').attachEvent('onpropertychange',function(o){      
  46.         if(o.propertyName =='value') {  
  47.             var msg = document.getElementById('myinput').value; //取得用户输入实时信息  
  48.             getContent(msg);  
  49.           
  50.         }  
  51.     });   
  52.     } else {  
  53.             document.getElementById('myinput').addEventListener( "input",function(o) {  
  54.             var msg = document.getElementById('myinput').value; //取得用户输入实时信息  
  55.             getContent(msg);              
  56.             },true);  
  57.     }  
  58.         //创建XMLHttpRequest对象     
  59.         function createXMLHttp() {  
  60.             if(window.ActiveXObject)  
  61.             xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");  
  62.             else   
  63.             xmlHttp = new XMLHttpRequest();  
  64.         }  
  65.           
  66.         //向服务器取数据  
  67.         function getContent(msg) {  
  68.             createXMLHttp();  
  69.             var url = encodeURI(encodeURI("query.do?msg=" + msg));  
  70.             xmlHttp.open("POST",url,true);  
  71.             xmlHttp.onreadystatechange = function() {  
  72.                 if(xmlHttp.readyState == 4) {  
  73.                     if (xmlHttp.responseText == '')  
  74.                         document.getElementById("aaa").style.visibility = 'hidden';  
  75.                     else{  
  76.                         document.getElementById("aaa").style.visibility = 'visible';  
  77.                         document.getElementById("aaa").innerHTML = xmlHttp.responseText;  
  78.                 }   
  79.                       
  80.                 }  
  81.             };  
  82.             xmlHttp.send();  
  83.         }  
  84.           
  85.     //-->     
  86.     </script>   
  87. </html>    
<%@ page contentType="text/html; charset=UTF-8" %>
<html>
	<head>
		<title>自动提示框</title>
	<style type="text/css">
	.mystyle
	{ background:white none repeat scroll 0 0;
	  border:1px solid black;
	  cursor:default;
	  font-size:13px;
	  line-height:17px;
	  margin:0;
	  z-index:99; 
	  width:150px;
	  left:10px;
	  top:10px; 
	  visibility: hidden;
	  }
	</style>
	</head>
	<body>

		<img src="pics/baidu_sylogo1.gif"/>
		<form>
			<input type="text" name="myinput" id="myinput" autocomplete="off"/>

			<input type="submit" value="百度一下" />
		</form>
		
					<div id="aaa" class="mystyle"></div>
	</body>
	<script type="text/javascript">   
	<!--    
		var xmlHttp; //XMLHttpRequest对象
		
		//判断浏览器类型
		function isIE() {
		if(navigator.userAgent.indexOf( "MSIE")>0) {
		return true;
		}
		}
		
		//定义表单内容改变事件
		if(isIE()) {
 	 	document.getElementById('myinput').attachEvent('onpropertychange',function(o){    
      	if(o.propertyName =='value') {
      		var msg = document.getElementById('myinput').value; //取得用户输入实时信息
      		getContent(msg);
      	
      	}
  	}); 
  	} else {
  		  	document.getElementById('myinput').addEventListener( "input",function(o) {
        	var msg = document.getElementById('myinput').value; //取得用户输入实时信息
      		getContent(msg);		  	
  		  	},true);
  	}
  		//创建XMLHttpRequest对象   
  		function createXMLHttp() {
  			if(window.ActiveXObject)
  			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
  			else 
  			xmlHttp = new XMLHttpRequest();
  		}
  		
  		//向服务器取数据
  		function getContent(msg) {
  			createXMLHttp();
  			var url = encodeURI(encodeURI("query.do?msg=" + msg));
  			xmlHttp.open("POST",url,true);
  			xmlHttp.onreadystatechange = function() {
  				if(xmlHttp.readyState == 4) {
  					if (xmlHttp.responseText == '')
  						document.getElementById("aaa").style.visibility = 'hidden';
  					else{
    					document.getElementById("aaa").style.visibility = 'visible';
  						document.getElementById("aaa").innerHTML = xmlHttp.responseText;
  				} 
  					
  				}
  			};
  			xmlHttp.send();
  		}
  		
	//-->   
	</script> 
</html>


再来是Servlet

 

QueryServlet.java:

 

 

[java] view plain copy print ?
  1. import java.io.IOException;  
  2. import java.io.PrintWriter;  
  3. import java.net.URLDecoder;  
  4. import java.sql.Connection;  
  5. import java.sql.DriverManager;  
  6. import java.sql.PreparedStatement;  
  7. import java.sql.ResultSet;  
  8. import java.sql.SQLException;  
  9.   
  10. import javax.servlet.ServletException;  
  11. import javax.servlet.http.HttpServlet;  
  12. import javax.servlet.http.HttpServletRequest;  
  13. import javax.servlet.http.HttpServletResponse;  
  14.   
  15. public class QueryServlet extends HttpServlet {  
  16.   
  17.     private static final long serialVersionUID = 1L;  
  18.   
  19.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  20.             throws ServletException, IOException {  
  21.   
  22.         request.setCharacterEncoding("UTF-8");  
  23.         response.setContentType("text/html;charset=UTF-8");  
  24.         PrintWriter out = response.getWriter();  
  25.   
  26.         String msg = request.getParameter("msg");  
  27.         String decoded_msg = URLDecoder.decode(msg,"UTF-8");  
  28.         System.out.println(decoded_msg);  
  29.         getContent(decoded_msg, out);  
  30.     }  
  31.   
  32.     public static Connection getConnection() {  
  33.         Connection conn = null;  
  34.         try {  
  35.             Class.forName("com.mysql.jdbc.Driver");  
  36.   
  37.             conn = DriverManager.getConnection(  
  38.                     "jdbc:mysql://localhost:3306/autocomplete", "root",  
  39.                     "your password");  
  40.   
  41.             return conn;  
  42.         } catch (ClassNotFoundException cnfe) {  
  43.             cnfe.printStackTrace();  
  44.             return null;  
  45.         } catch (SQLException e) {  
  46.             e.printStackTrace();  
  47.             return null;  
  48.         }  
  49.     }  
  50.   
  51.     public static void getContent(String msg, PrintWriter out) {  
  52.         Connection conn = null;  
  53.         PreparedStatement pstmt = null;  
  54.         ResultSet rs = null;  
  55.         if ( !msg.equals("")) {  
  56.             System.out.println(msg);  
  57.             String sql = "select * from hotwords where msg like '" + msg + "%'";  
  58.             System.out.println(sql);  
  59.   
  60.             try {  
  61.   
  62.                 conn = getConnection();  
  63.                 pstmt = conn.prepareStatement(sql);  
  64.                 rs = pstmt.executeQuery();  
  65.   
  66.                 while (rs.next()) {  
  67.                     out.print(rs.getString("msg") + "<br/>");  
  68.                 }  
  69.   
  70.             } catch (SQLException e) {  
  71.                 e.printStackTrace();  
  72.             }finally {  
  73.                 try{  
  74.                     if(rs != null) {  
  75.                         rs.close();  
  76.                     }  
  77.                     if(pstmt != null) {  
  78.                         pstmt.close();  
  79.                     }  
  80.                     if(conn != null) {  
  81.                         conn.close();  
  82.                     }  
  83.                 }catch(SQLException e) {  
  84.                     e.printStackTrace();  
  85.                 }  
  86.             }  
  87.   
  88.         }  
  89.     }  
  90.     //删除内容   
  91.     public static boolean deleteContent(String msg) {  
  92.         Connection conn = null;  
  93.         PreparedStatement pstmt = null;  
  94.             System.out.println(msg);  
  95.             String sql = "delete * from hotwords where msg =?";  
  96.   
  97.             try {  
  98.   
  99.                 conn = getConnection();  
  100.                 pstmt = conn.prepareStatement(sql);  
  101.                 pstmt.setString(1,msg);  
  102.                   
  103.                 int n = pstmt.executeUpdate();  
  104.                   
  105.                 if ( n > 0) {  
  106.                     return true;  
  107.                 }else {  
  108.                     return false;  
  109.                 }  
  110.   
  111.             } catch (SQLException e) {  
  112.                 e.printStackTrace();  
  113.                 return false;  
  114.             }finally {  
  115.                 try{  
  116.                     if(pstmt != null) {  
  117.                         pstmt.close();  
  118.                     }  
  119.                     if(conn != null) {  
  120.                         conn.close();  
  121.                     }  
  122.                 }catch(SQLException e) {  
  123.                     e.printStackTrace();  
  124.                 }  
  125.             }  
  126.   
  127.           
  128.           
  129.     }  
  130. }  
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class QueryServlet extends HttpServlet {

	private static final long serialVersionUID = 1L;

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		PrintWriter out = response.getWriter();

		String msg = request.getParameter("msg");
		String decoded_msg = URLDecoder.decode(msg,"UTF-8");
		System.out.println(decoded_msg);
		getContent(decoded_msg, out);
	}

	public static Connection getConnection() {
		Connection conn = null;
		try {
			Class.forName("com.mysql.jdbc.Driver");

			conn = DriverManager.getConnection(
					"jdbc:mysql://localhost:3306/autocomplete", "root",
					"your password");

			return conn;
		} catch (ClassNotFoundException cnfe) {
			cnfe.printStackTrace();
			return null;
		} catch (SQLException e) {
			e.printStackTrace();
			return null;
		}
	}

	public static void getContent(String msg, PrintWriter out) {
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		if ( !msg.equals("")) {
			System.out.println(msg);
			String sql = "select * from hotwords where msg like '" + msg + "%'";
			System.out.println(sql);

			try {

				conn = getConnection();
				pstmt = conn.prepareStatement(sql);
				rs = pstmt.executeQuery();

				while (rs.next()) {
					out.print(rs.getString("msg") + "<br/>");
				}

			} catch (SQLException e) {
				e.printStackTrace();
			}finally {
				try{
					if(rs != null) {
						rs.close();
					}
					if(pstmt != null) {
						pstmt.close();
					}
					if(conn != null) {
						conn.close();
					}
				}catch(SQLException e) {
					e.printStackTrace();
				}
			}

		}
	}
	//删除内容
	public static boolean deleteContent(String msg) {
		Connection conn = null;
		PreparedStatement pstmt = null;
			System.out.println(msg);
			String sql = "delete * from hotwords where msg =?";

			try {

				conn = getConnection();
				pstmt = conn.prepareStatement(sql);
				pstmt.setString(1,msg);
				
				int n = pstmt.executeUpdate();
				
				if ( n > 0) {
					return true;
				}else {
					return false;
				}

			} catch (SQLException e) {
				e.printStackTrace();
				return false;
			}finally {
				try{
					if(pstmt != null) {
						pstmt.close();
					}
					if(conn != null) {
						conn.close();
					}
				}catch(SQLException e) {
					e.printStackTrace();
				}
			}

		
		
	}
}


最后贴一个web.xml:

 

 

 

[html] view plain copy print ?
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app version="2.5"   
  3.     xmlns="http://java.sun.com/xml/ns/javaee"   
  4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   
  5.     xsi:schemaLocation="http://java.sun.com/xml/ns/javaee   
  6.     http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">  
  7.   <display-name></display-name>  
  8.   <servlet>  
  9.     <servlet-name>QueryServlet</servlet-name>  
  10.     <servlet-class>QueryServlet</servlet-class>  
  11.   </servlet>  
  12.   
  13.   <servlet-mapping>  
  14.     <servlet-name>QueryServlet</servlet-name>  
  15.     <url-pattern>/query.do</url-pattern>  
  16.   </servlet-mapping>  
  17.   <welcome-file-list>  
  18.     <welcome-file>index.jsp</welcome-file>  
  19.   </welcome-file-list>  
  20. </web-app>   
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
	xmlns="http://java.sun.com/xml/ns/javaee" 
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <display-name></display-name>
  <servlet>
    <servlet-name>QueryServlet</servlet-name>
    <servlet-class>QueryServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>QueryServlet</servlet-name>
    <url-pattern>/query.do</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>


大功告成，下面看一下效果：

 

 

IE9:

自动下拉框，仿百度

 

Google Chrome:

 

自动下拉框，仿百度

 

（数据库用户名和密码可以在QueryServlet.java类里改)

(别忘了在类库里添加MySQL驱动包)

(整个web项目放在资源里,供大家分享)

至于百度的图片，呵呵，自己去官网索取吧。大笑

你可能感兴趣的:(jsp,Ajax)

  • 学会这招！用python爬取微博评论（无重复数据） Python白白白白
    python爬取微博评论（无重复数据）前言一、整体思路二、获取微博地址1、获取ajax地址2、解析页面中的微博地址3、获取指定用户微博地址三、获取主评论四、获取子评论1、解析子评论2、获取子评论五、主函数调用1、导入相关库2、主函数执行3、结果写在最后Tip:本文仅供学习与交流，切勿用于非法用途！！！前言前段时间微博上关于某日记的评论出现了严重的两极分化，出于好奇的我想对其中的评论以及相关用户做一
  • 创建一个完整的购物商城系统是一个复杂的项目，涉及前端（用户界面）、后端（服务器逻辑）、数据库等多个部分。由于篇幅限制，我无法在这里提供一个完整的系统代码，但我可以分别给出一些关键部分的示例代码，涵盖几 uthRaman 前端ui服务器
    前端（HTML/CSS/JavaScript）grsyzp.cnHTML页面结构（index.html）html购物商城欢迎来到购物商城JavaScript（Ajax请求商品数据，app.js）javascriptdocument.addEventListener('DOMContentLoaded',function(){fetch('/api/products').then(response=
  • ajax的同源策略 Spring_Bear
    问题之前帮忙做的广告机器人数据提交的部分，利用ajax的XMLHTTPRequest提交到服务器的时候总是报错，错误类型是不同源。想到浏览器中的同源策略，明白了问题的原因。同源策略简单的说，就是浏览器不允许两个不同源的域名之间交换信息，那么这里就有两个问题。一是，什么信息不允许交换；二是，怎样算不同源。阮一峰的这篇博客浏览器同源政策及其规避方法其实已经介绍得比较清楚。引用一下，第一个问题：目前，如
  • Mybatis实现员工管理系统 wu1113_ mybatisjavamaven
    文章目录1.案例需求2.编程思路3.案例源码4.小结1.案例需求在上次做的父子模块的maven以及Ajax实现人工管理系统的基础上使用Mybatis实现员工管理系统的增删改查，具体运行效果如下：2.编程思路Mybatis框架的一般执行流程：创建MyBatis配置文件mybatis-config.xml在里面加载数据源、事务等，管理映射文件创建需要的映射文件mapper.xml，用于映射表中列和实体
  • java ajax_Java Ajax入门 孤独患喆 javaajax
    接下来整理一下Ajax相关的内容，AJAX(asynchronousjsandxml)，即异步的JavaScript和xml，它的主要作用就是让页面不必等待服务器返回整个页面信息，而可以通过异步的方式给服务器发送数据和获取数据，对页面进行局部刷新，是一种提高用户体验的技术。同步和异步同步和异步的主要区别如下；(1)同步：一个响应结束后才能发送下一个请求，页面在请求期间不能做其他事情。(2)异步：不
  • html加载界面发送ajax请求 足球数据分析 htmlajax前端
    html加载界面发送ajax请求makeAjaxRequest();functionmakeAjaxRequest(){varxhr=newXMLHttpRequest();//创建一个新的XMLHttpRequest对象xhr.open('GET','yourUrlPath',true);//配置请求，设置请求类型、URL和是否异步xhr.send();//发送请求}
  • 【网络安全 | 代码审计】JFinal之DenyAccessJsp绕过 秋说 网络安全web安全java代码审计漏洞挖掘
    未经许可，不得转载。文章目录前言代码审计推理绕过Tomcat解析JSP总结概念验证阐发前言JFinal是一个基于Java的轻量级MVC框架，用于快速构建Web应用程序。它的设计理念是追求极简、灵活、高效，旨在提高开发效率，减少冗余代码的编写，适合中小型项目以及对性能有较高要求的项目。在较新的JFinal版本中，默认情况下无法直接通过浏览器地址栏输入.jsp文件名来访问对应的JSP文件。也就是说，主
  • ajax 获取一步数据,ajax异步获取数据 可可子姐姐教英语 ajax获取一步数据
    functioncreateXHR(){if(typeofXMLHttpRequest!="undefined"){returnnewXMLHttpRequest();}elseif(typeofActiveXObject!="undefined"){varversion=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];fo
  • 招银网络&大疆&元象一面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，XHR、axios和fetch这三者的区别是什么？axios和fetch的底层实现是什么？axios拦截器是什么？axios提供了哪些配置或功能，是fetch和XHR中没有的？你的回答中不要写出示例代码。XHR、axios和fetch的区别XHR(XMLHttpRequest)历史：XHR是最早的AJAX技术，由微软在1999年引入，后来被标准化。兼容性：几乎所有现代浏览器
  • ajax讲解 夜不眠，码三千 okhttp
    1.AJAX概述1.1什么是ajaxAJAX（AsynchronousJavascriptAndXML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过
  • AJAX异步请求数据 铸键为犁 JavaWebajaxservletjavascript
    文章目录前言一、AJAX是什么？二、使用步骤1.语法格式2.示例2.注意事项总结前言本篇主要介绍怎么使用AJAX向服务器请求数据。一、AJAX是什么？异步请求技术,可以实现页面局部刷新,在不刷新页面的情况下发送请求到后台加载数据,并且展现在前端二、使用步骤1.语法格式代码如下：$.get(url,data,function(data){})发送get请求参数1:url是后台服务器地址参数2:dat
  • jsp 从后台Map中取值 yank1225 jsp从map取值jsp按key获取map中的对应值springmMVCjsp页面取得map值
    在jsp页面有的时候需要从后台传过来的Map中取特定值，并显示在页面上，网上有很多说怎么取值的，但是找了好久很多都是讲的怎么循环取值，如果你需要在table中显示值那该怎么办呢？很多都没有讲，我把我的方法简单介绍下。场景是这样的下面是table的行数据从后台controller返回分页信息，pageInfo.list是当前行数据，item.houseType是数据，但是这个是值（1或者2等等）并不
  • vue 生成PDF(A4标准PDF分页) qq_39016177 HTML2CanvasjsPDF导出PDF转换DOM操作
    1.先安装两个插件//页面转图片npminstall--savehtml2canvas//图片转PDFnpminstalljspdf--save 2.在需要导出的dom节点增加ref='pdf'例如  这是待转换的页面，点击导出点击导出PDF3.定义导出方法handleExport(){   downloadPDF(this.$refs.pdf);},4.在页面导入 import{download
  • Java程序的分层设计 天天进步2015 架构设计java开发语言
    Java程序的分层设计通常遵循分层架构（LayeredArchitecture）的原则，将应用程序分为多个相互独立但有依赖关系的层。这样设计有助于降低耦合度，提高可维护性和可扩展性。典型的Java分层设计包括以下几层：1.表示层（PresentationLayer/ViewLayer）功能：用户界面层，负责与用户交互。将用户输入的信息传递给业务层，同时将业务层返回的结果展示给用户。一般使用JSP、
  • 基于ssm框架的计算机毕业设计(论文+源码)_kaic 开心工作室V(kaic_kaic) 计算机文章毕业设计javaoracle开发语言前端旅游数据库actionscript
    编号ssmssm001高校专业信息管理系统设计与实现+jsp源码+数据库+PPT+开题+论文+说明文档ssm002ssm学院党员管理系统+jsp源码+数据库+开题+论文+说明文档ssm003ssm在线医疗服务系统+jsp源码+数据库+开题+论文+说明文档ssm004ssm新生报到系统+jsp源码+数据库+开题+论文+说明文档ssm005基于SSM框架的购物商城系统+jsp源码+数据库+开题+任务书
  • idea 启动tomcat 工程_使用IDEA创建JavaWeb项目 部署本地tomcat并运行 心在天上脚在地上 idea启动tomcat工程
    一、下载商业版IDEA二、新建JavaWeb项目1、在菜单栏找到File>>New>>Project2、在弹出的窗口中找到JavaEnterPrise>>WebApplication，点击Next3、填写项目名称，选择项目位置，然后Finish4、在左侧窗口可以看到IDEA创建JavaWeb工程的目录结构，在src中写java代码，在web目录下放jsp页面。三、下载tomacat下载完成后，解压
  • 解锁网页交互利器：深入浅出 AJAX，用 JavaScript 与后端服务器对话，局部请求刷新数据 微特尔普拉斯 ajaxjavascriptajax前端javascript
    在当今互联网时代，网页早已不再是静态的信息展示平台，而是充满动态交互的应用体验场。而实现这种流畅交互体验的关键技术之一，便是AJAX（AsynchronousJavaScriptandXML）。它允许网页在后台悄无声息地与服务器交换数据，无需刷新整个页面，便可实现内容的动态更新，为用户带来行云流水般的操作体验。在AJAX出现之前，网页开发采用的是前后端不分离的模式。前端开发者编写好HTML和CSS
  • 微信小程序之轮播图组件封装 鱼在在 vueuni-app微信小程序javascript
    目录封装组件——mp-rotationchat组件的属性与方法——swiper-rotation-chat.js组件的引入使用封装组件——mp-rotationchat文件目录components（所有组件位置）swiper-roatiton-chat（轮播图组件包）swiper-rotation-chat.wxmlswiper-rotation-chat.jspages（所有页面）index（初
  • 【前端】Vue服务器端渲染之Nuxt irenb
    1.什么是服务器端渲染后端先调用数据库，获得数据之后，将数据和页面元素进行拼装，组合成完整的html页面，再直接返回给浏览器，以便用户浏览。总结：数据填充在服务器端进行，就是服务器端渲染什么是客户端渲染数据由浏览器通过ajax动态获得，再通过js将数据填充到dom元素上最终展示到网页中，这样的过程叫做客户端渲染。总结：数据填充在客户端进行，就是客户端渲染服务器端渲染vs客户端渲染服务器端渲染需要消
  • 前后端分离，Asp.net core webapi 如何配置跨域 代码掌控者 C#asp.netcore.netcore经验分享c#
    前言可以说，前后端分离已经成为当今信息系统项目开发的主流软件架构模式，微服务的出现，让前后端分离发展更是迅速，大量优秀的前端框架如vue.js、react的出现，也让前后端分离趋势加快。所谓的前后端分离软件架构模式，就是指将前端和后端的开发完全分离，后端负责提供API接口和数据处理，而前端通过各种现代的JavaScript技术如AJAX或者Fetch等，来调用后端提供的API接口获取数据，从而构建
  • 旅游网站设计与实现：SpringBoot框架案例分析 2401_85763803 旅游springboot后端
    目录摘要2Abstract31.1课题开发的背景41.2课题研究的意义41.3研究内容5第二章系统开发关键技术62.1JSP技术介绍62.2JAVA简介62.3MyEclipse开发环境72.4Tomcat服务器72.5SpringBoot框架72.6MySQL数据库8第三章系统分析93.1系统可行性研究93.2性能分析103.3业务流程分析10第四章系统的总体设计134.1系统功能结构设计134
  • ssm——整合，前端页面设计，分页 2401_86367399 面试辅导大厂内推前端java开发语言
    empMapper.updateEmpById(m);}//用于批量的插入数据@TestpublicvoidinsertDeptByBATCH(){DeptMapperOCM=sqlSession.getMapper(DeptMapper.class);for(inti=0;iindex.jsp页面发送出查询信息列表的请求->EmpController来接受请求，然后查询出员工数据->跳转到lis
  • 通过前端实现导出生成pdf文件并下载 银河小铁皮 vue原生JS前端javascriptvue.js
    通过前端实现导出生成pdf文件并下载使用jspdf.js+html2canvas插件，实现前端生成pdf并下载的功能步骤如下1、先通过npm安装插件npminstalljspdf.jsnpminstallhtml2canvas2、单独在utils文件夹下，新建文件，存放处理代码/*eslint-disable*///不使用JQuery版的importhtml2canvasfrom'html2can
  • vue基本语法 多啦爱梦的梦想 vue
    VUEday01异步函数和回调函数何为异步函数：不会马上执行，需要特定的时机执行的函数，由于是异步的，不会阻塞主线程代码的执行异步函数有哪些：ajax请求，定时器，延时器，文件读取何为回调函数：把一个函数当作参数传递，将来特定的时机调用，这个函数就是回调函数，一般异步操作，都会用到回调函数例如：setTimeout(()=>{console.log(2)},1000)==>定时器里面的打印2不会立
  • 基于SpringBoot的在线汽车租赁信息管理系统 计算机学姐 前后端分离项目源码分享SpringBoot源码Vue源码springboot汽车后端javavue.jsspringmysql
    作者：计算机学姐开发技术：SpringBoot、SSM、Vue、MySQL、JSP、ElementUI等，“文末源码”。专栏推荐：前后端分离项目源码、SpringBoot项目源码、SSM项目源码系统展示【2025最新】基于Java+SpringBoot+Vue+MySQL的在线汽车租赁信息管理系统，前后端分离。开发语言：Java数据库：MySQL技术：SpringBoot、Vue、MybaitsP
  • Python全栈 part02 - 006 Ajax drfung
    JSON定义:JSON(Javascriptobjectnotation,JS对象标记)是一种轻量级的数据交换格式;是基于ECMASCript(w3cjs规范)的一个子集.JS-JSON-Python.pngJSON对象定义需要注意的点属性名必须用"(双引号)不能使用十六进制值不能使用undefined不能使用函数名和日期函数stringify与parse方法JSON.parse()将一个JSON
  • Spring Boot 技术提升房屋租赁系统性能 2401_85763803 springboot后端java
    第2章技术介绍2.1相关技术房屋租赁系统是在JSP+MySQL开发环境的基础上开发的。JSP是一种服务器端脚本语言，易于学习，实用且面向用户。全球超过35％的JSP驱动的互联网站点使用JSP。MySQL是一个数据库管理系统，因为它的体积小但速度快，成本低，或者开源受到中小型网站的青睐。因此，JSP+MySQL作为一个成熟的开发环境，可以满足房屋租赁系统设计和开发所需的稳定性，安全性和可扩展性要求。
  • AJAX实时表单验证系统 三年九班蓝同学
    本文还有配套的精品资源，点击获取简介：在网页开发中，"ajax验证表单"是一项关键任务，确保数据符合格式和规则，提升数据质量和用户体验。本应用通过使用JavaScript和XMLHttpRequest对象实现后台验证，无需页面刷新。它包括前端验证、事件处理、Ajax调用、服务器端处理、响应处理、用户体验和安全性等关键步骤，以jQuery库简化开发流程，创建高效、安全的表单验证系统。1.表单验证的重
  • SpringMVC的架构有什么优势？——视图与模型（二） 不会编程的小孩子 架构
    #SpringMVC的架构有什么优势？——视图与模型（二）前言关键字：机器学习人工智能AIchatGPT学习实现使用搭建深度python事件远程dockermysql安全技术部署技术自动化代码视图(View)视图是展示结果的组件，它们负责渲染模型数据并生成HTML输出。SpringMVC支持多种视图技术，包括JSP、Thymeleaf等。视图(View)是SpringMVC中渲染并呈现结果的组件，
  • 利用jQuery框架的ajax请求获取json格式的数据 听海边涛声 jqueryajaxjson
    Document$('#btn').click(()=>{$.get('http://localhost:8080/jsajaxproject/jquery_json','username=tom&age=20',(data)=>{//alert(data)alert(data.name+'\t'+data.age+'\t'+data.gender)},'json')})点击按钮：
  • 对于规范和实现，你会混淆吗？ yangshangchuan HotSpot
    昨晚和朋友聊天，喝了点咖啡，由于我经常喝茶，很长时间没喝咖啡了，所以失眠了，于是起床读JVM规范，读完后在朋友圈发了一条信息： JVM Run-Time Data Areas：The Java Virtual Machine defines various run-time data areas that are used during execution of a program. So
  • android 网络 百合不是茶 网络
    android的网络编程和java的一样没什么好分析的都是一些死的照着写就可以了,所以记录下来  方便查找   ,  服务器使用的是TomCat   服务器代码;  servlet的使用需要在xml中注册 package servlet; import java.io.IOException; import java.util.Arr
  • [读书笔记]读法拉第传 comsci 读书笔记
          1831年的时候,一年可以赚到1000英镑的人..应该很少的...       要成为一个科学家,没有足够的资金支持,很多实验都无法完成       但是当钱赚够了以后....就不能够一直在商业和市场中徘徊......
  • 随机数的产生 沐刃青蛟 随机数
    c++中阐述随机数的方法有两种：   一是产生假随机数（不管操作多少次，所产生的数都不会改变）          这类随机数是使用了默认的种子值产生的，所以每次都是一样的。   //默认种子 for (int i = 0; i < 5; i++) { cout<<
  • PHP检测函数所在的文件名 IT独行者 PHP函数
    很简单的功能，用到PHP中的反射机制，具体使用的是ReflectionFunction类，可以获取指定函数所在PHP脚本中的具体位置。 创建引用脚本。 代码：   [php]   view plain copy // Filename: functions.php    <?php&nbs
  • 银行各系统功能简介 文强chu 金融
    银行各系统功能简介 　 业务系统 核心业务系统 业务功能包括：总账管理、卡系统管理、客户信息管理、额度控管、存款、贷款、资金业务、国际结算、支付结算、对外接口等 清分清算系统 以清算日期为准，将账务类交易、非账务类交易的手续费、代理费、网络服务费等相关费用，按费用类型计算应收、应付金额，经过清算人员确认后上送核心系统完成结算的过程 国际结算系
  • Python学习1(pip django 安装以及第一个project) 小桔子 pythondjangopip
        最近开始学习python,要安装个pip的工具。听说这个工具很强大，安装了它，在安装第三方工具的话so easy!然后也下载了，按照别人给的教程开始安装，奶奶的怎么也安装不上！ 第一步：官方下载pip-1.5.6.tar.gz, https://pypi.python.org/pypi/pip easy! 第二部：解压这个压缩文件，会看到一个setup.p
  • php 数组 aichenglong PHP排序数组循环多维数组
    1 php中的创建数组 $product = array('tires','oil','spark');//array()实际上是语言结构而不  是函数 2 如果需要创建一个升序的排列的数字保存在一个数组中，可以使用range()函数来自动创建数组 $numbers=range(1,10)//1 2 3 4 5 6 7 8 9 10 $numbers=range(1,10,
  • 安装python2.7 AILIKES python
    安装python2.7 1、下载可从 http://www.python.org/进行下载#wget https://www.python.org/ftp/python/2.7.10/Python-2.7.10.tgz 2、复制解压 #mkdir -p /opt/usr/python #cp  /opt/soft/Python-2
  • java异常的处理探讨 百合不是茶 JAVA异常
    //java异常  /* 1，了解java 中的异常处理机制，有三种操作 a,声明异常  b,抛出异常  c,捕获异常 2，学会使用try-catch-finally来处理异常 3，学会如何声明异常和抛出异常 4，学会创建自己的异常   */   //2，学会使用try-catch-finally来处理异常  
  • getElementsByName实例 bijian1013 element
    实例1： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x
  • 探索JUnit4扩展：Runner bijian1013 java单元测试JUnit
            参加敏捷培训时，教练提到Junit4的Runner和Rule，于是特上网查一下，发现很多都讲的太理论，或者是举的例子实在是太牵强。多搜索了几下，搜索到两篇我觉得写的非常好的文章。         文章地址：http://www.blogjava.net/jiangshachina/archive/20
  • [MongoDB学习笔记二]MongoDB副本集 bit1129 mongodb
    1. 副本集的特性   1)一台主服务器(Primary),多台从服务器(Secondary)   2)Primary挂了之后，从服务器自动完成从它们之中选举一台服务器作为主服务器，继续工作，这就解决了单点故障，因此，在这种情况下，MongoDB集群能够继续工作   3)挂了的主服务器恢复到集群中只能以Secondary服务器的角色加入进来   2
  • 【Spark八十一】Hive in the spark assembly bit1129 assembly
    Spark SQL supports most commonly used features of HiveQL. However, different HiveQL statements are executed in different manners: 1. DDL statements (e.g. CREATE TABLE, DROP TABLE, etc.)
  • Nginx问题定位之监控进程异常退出 ronin47
    nginx在运行过程中是否稳定，是否有异常退出过？这里总结几项平时会用到的小技巧。 1. 在error.log中查看是否有signal项，如果有，看看signal是多少。 比如，这是一个异常退出的情况： $grep signal error.log 2012/12/24 16:39:56 [alert] 13661#0: worker process 13666 exited on s
  • No grammar constraints (DTD or XML schema).....两种解决方法 byalias xml
    方法一：常用方法   关闭XML验证 工具栏：windows => preferences => xml => xml files => validation => Indicate when no grammar is specified:选择Ignore即可。 方法二：（个人推荐） 添加 内容如下 <?xml version=
  • Netty源码学习-DefaultChannelPipeline bylijinnan netty
    package com.ljn.channel; /** * ChannelPipeline采用的是Intercepting Filter 模式 * 但由于用到两个双向链表和内部类，这个模式看起来不是那么明显，需要仔细查看调用过程才发现 * * 下面对ChannelPipeline作一个模拟，只模拟关键代码： */ public class Pipeline {
  • MYSQL数据库常用备份及恢复语句 chicony mysql
    备份MySQL数据库的命令，可以加选不同的参数选项来实现不同格式的要求。 mysqldump -h主机 -u用户名 -p密码 数据库名 > 文件 备份MySQL数据库为带删除表的格式，能够让该备份覆盖已有数据库而不需要手动删除原有数据库。 mysqldump -–add-drop-table -uusername -ppassword databasename > ba
  • 小白谈谈云计算--基于Google三大论文 CrazyMizzz Google云计算GFS
        之前在没有接触到云计算之前，只是对云计算有一点点模糊的概念，觉得这是一个很高大上的东西，似乎离我们大一的还很远。后来有机会上了一节云计算的普及课程吧，并且在之前的一周里拜读了谷歌三大论文。不敢说理解，至少囫囵吞枣啃下了一大堆看不明白的理论。现在就简单聊聊我对于云计算的了解。     我先说说GFS   &n
  • hadoop 平衡空间设置方法 daizj hadoopbalancer
    在hdfs-site.xml中增加设置balance的带宽，默认只有1M： <property>   <name>dfs.balance.bandwidthPerSec</name>     <value>10485760</value>     <description&g
  • Eclipse程序员要掌握的常用快捷键 dcj3sjt126com 编程
      判断一个人的编程水平，就看他用键盘多，还是鼠标多。用键盘一是为了输入代码（当然了，也包括注释），再有就是熟练使用快捷键。 曾有人在豆瓣评 《卓有成效的程序员》：“人有多大懒，才有多大闲”。之前我整理了一个 程序员图书列表，目的也就是通过读书，让程序员变懒。  程序员作为特殊的群体，有的人可以这么懒，懒到事情都交给机器去做，而有的人又可以那么勤奋，每天都孜孜不倦得
  • Android学习之路 dcj3sjt126com Android学习
    转自：http://blog.csdn.net/ryantang03/article/details/6901459 以前有J2EE基础，接触JAVA也有两三年的时间了，上手Android并不困难，思维上稍微转变一下就可以很快适应。以前做的都是WEB项目，现今体验移动终端项目，让我越来越觉得移动互联网应用是未来的主宰。 下面说说我学习Android的感受，我学Android首先是看MARS的视
  • java 遍历Map的四种方法 eksliang javaHashMapjava 遍历Map的四种方法
    转载请出自出处： http://eksliang.iteye.com/blog/2059996 package com.ickes; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Map.Entry; /** * 遍历Map的四种方式
  • 【精典】数据库相关相关 gengzg 数据库
    package C3P0; import java.sql.Connection; import java.sql.SQLException; import java.beans.PropertyVetoException; import com.mchange.v2.c3p0.ComboPooledDataSource; public class DBPool{
  • 自动补全 huyana_town 自动补全
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo
  • jquery在线预览PDF文件，打开PDF文件 天梯梦 jquery
    最主要的是使用到了一个jquery的插件jquery.media.js，使用这个插件就很容易实现了。   核心代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.
  • ViewPager刷新单个页面的方法 lovelease androidviewpagertag刷新
      使用ViewPager做滑动切换图片的效果时，如果图片是从网络下载的，那么再子线程中下载完图片时我们会使用handler通知UI线程，然后UI线程就可以调用mViewPager.getAdapter().notifyDataSetChanged()进行页面的刷新，但是viewpager不同于listview，你会发现单纯的调用notifyDataSetChanged()并不能刷新页面
  • 利用按位取反（~）从复合枚举值里清除枚举值 草料场 enum
    以 C# 中的 System.Drawing.FontStyle 为例。   如果需要同时有多种效果， 如：“粗体”和“下划线”的效果，可以用按位或（|） FontStyle style = FontStyle.Bold | FontStyle.Underline;   如果需要去除 style 里的某一种效果，
  • Linux系统新手学习的11点建议 刘星宇 编程工作linux脚本
    　　随着Linux应用的扩展许多朋友开始接触Linux，根据学习Windwos的经验往往有一些茫然的感觉：不知从何处开始学起。这里介绍学习Linux的一些建议。 　　一、从基础开始：常常有些朋友在Linux论坛问一些问题，不过，其中大多数的问题都是很基础的。例如：为什么我使用一个命令的时候，系统告诉我找不到该目录，我要如何限制使用者的权限等问题，这些问题其实都不是很难的，只要了解了 Linu
  • hibernate dao层应用之HibernateDaoSupport二次封装 wangzhezichuan DAOHibernate
    /** * <p>方法描述:sql语句查询 返回List<Class> </p> * <p>方法备注: Class 只能是自定义类 </p> * @param calzz * @param sql * @return * <p>创建人：王川</p> * <p>创建时间：Jul
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他