這個demo是用於記錄ajax，json，jsp，js的基本使用方法，本例是通過html+css+js製作的前端界面，通過ajax方法向jsp寫的web服務請求json數據。再經過處理返回到前端。
前端界面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>綜合查詢界面</title>
<script src="js/jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="css/new_design_css_0208.css">
<script>
$(function () {
$('body').bind('keypress',function (event) {
if(event.keyCode=="13"){
//回車的keyCode是13
$('#enter_search').click();
}
})
});
</script>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 瀏覽器執行代碼
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var hth=document.getElementById("hth").value;
if(hth.length!=8){
alert("輸入的合同號不是8位");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var txt=xmlhttp.responseText;
var obj=JSON.parse(txt);
var get_feedback="";
for(var i= 0 ;i<obj.feedback.length;i++){
get_feedback+= obj.feedback[i].zzbh+",";
document.getElementById("myDiv").innerHTML=get_feedback;
}
}
};
xmlhttp.open("GET","http://localhost:8888/linktosqlservice2-27.jsp?hth="+hth,true);//3000000002283171
xmlhttp.send();
}
</script>
</head>
<body >
<div id="navigation">
<ul>
<li><img src="image/main_logo.png"><li>
<li><a href="new_design_pg.html" >屏櫃</a></li>
<li><a href="new_design_zz.html" >裝置</a></li>
<li><a href="new_design_bj.html" >板件</a></li>
<li><a href="new_design_wl.html" >物料</a></li>
<li><input type="text" id="hth" maxlength = "30" ><button id="enter_search" type="button" onclick="loadXMLDoc()">Search</button></li>
</ul>
</div>
<div id="myDiv"><h2>這裏即將出現一個工程名</h2></div>
</body>
</html>
後臺處理：
<%@ page import="java.sql.*" %>
<%@ page import="net.sf.json.JSONObject" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.HashMap" %>
<%@ page import="net.sf.json.JSONArray" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--與BCTMng安全通訊--%>
<%!
private static final String url = "jdbc:mysql://.../test";
private static final String username = "";
private static final String password = "";
private String gcm="";
private String hth="";
private String zzbh="";
private String zzxh="";
private String gzdy="";
private List<Map> list=new ArrayList<Map>();
%>
<%!
public void Connectiontosqlserver(Connection con, String MYRESULT) throws java.sql.SQLException {
try {
String sql = "select * from tsliucheng where hth="+"'"+MYRESULT+"'"+"";//查詢表名爲“table_test”的所有內容
Statement stmt = con.createStatement();//創建Statement
ResultSet rs = stmt.executeQuery(sql);//ResultSet類似Cursor
while(rs.next()) {
gcm=rs.getString("gcm").toString();
hth=rs.getString("hth").toString();
zzbh=rs.getString("zzbh").toString();
zzxh=rs.getString("zzxh").toString();
gzdy=rs.getString("gzdy").toString();
Map obj=new HashMap();
obj.put("gcm",gcm);
obj.put("hth",hth);
obj.put("zzbh",zzbh);
obj.put("zzxh",zzxh);
obj.put("gzdy",gzdy);
list.add(obj);
}
rs.close();
stmt.close();
con.close();
} catch (SQLException ex) {
}
}
%>
<%
hth = new String(request.getParameter("hth").getBytes("UTF-8"),"UTF-8");
list.clear();
Class.forName("com.mysql.jdbc.Driver");
Connection consqlserver = DriverManager.getConnection(url,username, password);
Connectiontosqlserver(consqlserver, hth);//測試數據庫連接,自己定義的函數
JSONArray array=JSONArray.fromObject(list);
JSONObject json_obj=new JSONObject();
json_obj.put("feedback",array);
out.println(json_obj);
%>
使用到的java包：
下載地址：http://download.csdn.net/download/qq_38307618/10262725
