ajax 動態獲取數據庫中的值

時間 2019-11-19

標籤 ajax 動態獲取數據庫欄目 Ajax 简体版

原文原文鏈接

功能簡介：在一個輸入框中輸入內容，當內容長度>1時向後發送ajax 從數據庫中獲取有關文本框中的內容在前臺顯示，前臺設計一些點擊事件，以及jquery的應用javascript

注意：html

request.getParameter("postData").trim() 放在判斷以前可能會空指針異常  若是前面的爲null null.trim() 就會報錯

若是沒帶參數直接訪問也會報空指針的錯誤

1 使用了springmvc 中的requestmapping註解故先附上配置文件java

web.xml配置:mysql

<servlet>
		<servlet-name>springDispatcherServlet</servlet-name>
		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
		<init-param>
			<param-name>contextConfigLocation</param-name>
			<param-value>classpath:springmvc.xml</param-value>
		</init-param>
		<load-on-startup>1</load-on-startup>
	</servlet>

	<!-- Map all requests to the DispatcherServlet for handling -->
	<servlet-mapping>
		<servlet-name>springDispatcherServlet</servlet-name>
		<url-pattern>/</url-pattern>
	</servlet-mapping>

springmvc.xml配置以下：

<!-- 配置自定掃描的包 -->
	<context:component-scan base-package="com.rl.util"></context:component-scan>

	<!-- 配置視圖解析器: 如何把 handler 方法返回值解析爲實際的物理視圖 -->
	<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<property name="prefix" value="/WEB-INF/views/"></property>
		<property name="suffix" value=".jsp"></property>
	</bean>

前臺頁面以下:jquery

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
			input[name]{
				width:500px;
				height: 20px;
				align-self: center;
				vertical-align:middel;
				margin-left:300px;
			}
			
			#div1{
				width: 500px;
				height: 230px;
				border: 1px solid black;
				list-style:none;
				margin-left:300px;
				display: none;
				
			}
			.mouseOver{
				background-color: red;
			}
		</style>
		<script type="text/javascript" src="static/bootstrap/js/jquery.min.js" ></script>
</head>
<body>
	<input id="sousuo" type="text" name="inputText" placeholder="請輸入" />
		<input type="button" value="搜索" />
		<br>
	<div id="div1">
			<li>北京</li>
			<li>天</li>
			<li>上</li>
			
	</div>
	
	 <a href="ad">dasf</a>
</body>
<script>
		$("#sousuo").focus();
			$("#sousuo").blur(function(){
					$("#div1").hide(1000);
			})
		$(document).ready(function(){
			$("#sousuo").bind("keyup",function(){
			var $inpu=$("#sousuo").val();
						
				if($inpu.length>1){
					//alert($inpu);

					$.ajax({
			            async : false,
			            cache : false,
			            type : 'POST',
			            url : '/ajax_jso/ad',
			            dataType : "json",
			          	data : {"postData":$inpu},            
			            error : function() {
			                alert('請求失敗 ');
			            },
			            success : function(data) {
			              /*  */
			               $("li").text("");
			               for(var i=0;i<data.length;i++){
			            	  /*  . */
				               var $li = $("<li></li>");
				               $li.text(data[i]);
				               $("#div1").append($li);
			               }
			               
			            }

			        });
					
					$("#div1").show(1000)
					//setTimeout(,5000)
					
				}
				
				$("li").mouseover(function(){
					$("li").removeClass();		
					$(this).addClass("mouseOver");
					
				});
				$("li").click(function(){
					$("#sousuo").val($(this).text());
				})
			});
			
			
		});
			
			
			
	</script>
</html>

　　後臺接受請求的代碼以下：web

package com.rl.util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import com.google.gson.Gson;
import com.google.gson.GsonBuilder;

import net.sf.json.JSONArray;

@Controller
public class Control {
	@RequestMapping("/ad")
	@ResponseBody
	public 	String  getList(HttpServletRequest request) {
		//HttpServletRequest request=  ServletActionContext.getRequest();  
		List<String> list=new ArrayList<>();
		Gson gson2 = new GsonBuilder().enableComplexMapKeySerialization().create(); 
		try {
			
			Class.forName("com.mysql.jdbc.Driver");// 導入驅動（jar包）
		} catch (ClassNotFoundException e) {
			e.printStackTrace();
		}
		String name = "";
		Connection conn = null;
		try {
			conn = (Connection) DriverManager.getConnection("jdbc:mysql://localhost:3306/xxff", "root", "123456");// 創建鏈接
		} catch (SQLException e) {
			e.printStackTrace();
		}

		// String sql = "select name,email,dob from student";//創建SQL語句
		System.out.println( request.getParameter("postData"));
		  String postData =  request.getParameter("postData");  
		  if(postData==null){
			  System.out.println("null    "+"postData");
		  }
		  
		  else{
			  postData = postData.trim();
			  System.out.println("TrubleShooting.java  timestap = "+postData);
				String sql = "SELECT  login_name FROM tab_account WHERE login_name LIKE '%"
						+ ""
						+postData+ "%'";//where login_name like '%postData%'
				/*List<Map<String, String>> list = new ArrayList<>();
				Map<String, String> map = new HashMap<>();
				*/
				
				try {
					Statement stmt = (Statement) conn.createStatement();
					ResultSet rs = stmt.executeQuery(sql);
					// cursor
					while (rs.next()) {
						name = rs.getString(1);
						//list.add(name);
						/*
						 * String email = rs.getString(2); String dob = rs.getString(3);
						 */
						//System.out.println(name/* +" , "+email+" , "+dob */);
						System.out.println(name);
						//map.put("name", name);
						list.add(name);
						//list轉成json
				        
					}
				} catch (SQLException e) {
					e.printStackTrace();
				} finally {
					if (conn != null)
						try {
							conn.close();// 關閉鏈接
						} catch (SQLException e) {
							e.printStackTrace();
						}
				}
		  }
		 
		String json=JSONArray.fromObject(list).toString();
		JSONArray jsonArray = JSONArray.fromObject(json);
		 //List<String> list2 = (List) JSONArray.toCollection(jsonArray);
		return json;
	}
}

jquery中的ajax方法參數的用法和他的含義：

1.url:
　　要求爲String類型的參數，（默認爲當前頁地址）發送請求的地址。ajax

2.type:
　　要求爲String類型的參數，請求方式（post或get）默認爲get。注意其餘http請求方法，例如put和delete也能夠使用，但僅部分瀏覽器支持。spring

3.timeout:
　　要求爲Number類型的參數，設置請求超時時間（毫秒）。此設置將覆蓋$.ajaxSetup()方法的全局設置。sql

4.async:
　　要求爲Boolean類型的參數，默認設置爲true，全部請求均爲異步請求。若是須要發送同步請求，請將此選項設置爲false。注意，同步請求將鎖住瀏覽器，用戶其餘操做必須等待請求完成才能夠執行。數據庫

5.cache:
　　要求爲Boolean類型的參數，默認爲true（當dataType爲script時，默認爲false），設置爲false將不會從瀏覽器緩存中加載請求信息。

6.data:
　　要求爲Object或String類型的參數，發送到服務器的數據。若是已經不是字符串，將自動轉換爲字符串格式。get請求中將附加在url後。防止這種自動轉換，能夠查看　　processData（防止自動轉換）選項。對象必須爲key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換爲&foo1=bar1&foo2=bar2。若是是數組，JQuery將自動爲不一樣值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換爲&foo=bar1&foo=bar2。

7.dataType:
　　要求爲String類型的參數，預期服務器返回的數據類型。若是不指定，JQuery將自動根據http包mime信息返回responseXML或responseText，並做爲回調函數參數傳遞。可用的類型以下：
　　xml：返回XML文檔，可用JQuery處理。
　　html：返回純文本HTML信息；包含的script標籤會在插入DOM時執行。
　　script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時（不在同一個域下），全部post請求都將轉爲get請求。
　　json：返回JSON數據。
　　jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換後一個「?」爲正確的函數名，以執行回調函數。
　　text：返回純文本字符串。

8.contentType：
要求爲String類型的參數，當發送信息至服務器時，內容編碼類型默認爲"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。

9.success：

　　要求爲Function類型的參數，請求成功後調用的回調函數，有兩個參數。
         (1)由服務器返回，並根據dataType參數進行處理後的數據。
         (2)描述狀態的字符串。
         function(data, textStatus){
            //data多是xmlDoc、jsonObj、html、text等等
            this; //調用本次ajax請求時傳遞的options參數
         }

10.error:要求爲Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數以下： function(XMLHttpRequest, textStatus, errorThrown){ //一般狀況下textStatus和errorThrown只有其中一個包含信息 this; //調用本次ajax請求時傳遞的options參數 }