[JAVA]連絡我們表單程式前台

這是個很常在官方網頁看到的程式,在這種表單之前要與官方網站人員連絡,只能使用email,只是這email address會被人故意的收集,發送垃圾郵件,十分讓人困擾。

在表單的設計上,需要讓網站人員能知道是誰留了資料,所以連絡的方式一定要讓使用者留下,所以設計畫面如下:類型、標題、姓名、EMail、電話及內容。

連絡我們表單內容

按下送出,可存於資料庫裡,這裡可以再加一個send mail的動作,不過目前這個範例並沒有實作。

mysql資料庫內容

MySQL資料表

delimiter $$
CREATE TABLE `contact` (
`id` int(11) NOT NULL auto_increment,
`title` varchar(500) default NULL,
`content` text,
`user_name` varchar(45) default NULL,
`user_email` varchar(45) default NULL,
`user_tel` varchar(45) default NULL,
`kind` varchar(45) default NULL,
`postdate` timestamp NULL default CURRENT_TIMESTAMP,
`replydate` timestamp NULL default NULL,
PRIMARY KEY  (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=2 DEFAULT CHARSET=utf8$$

index.jsp連絡表單,使用到jquery及jquery form plugin

<%@ 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>聯絡表單</title>
<style type="text/css">
html,body{
margin:0;
padding:0;
height:100%;
border:none
}
</style>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
$(function(){
$(document).ready(function() { 
// bind form using 'ajaxForm' 
$('#myform').ajaxForm({ 
beforeSubmit:  function(formData, jqForm, options){
var title = $("#title").val();
if(title==""){
alert("標題不可為空白!");return false;}
var name = $("#name").val();
if(name==""){
alert("姓名不可為空白!");return false;}
var mail = $("#mail").val();
if(mail==""){
alert("EMAIL不可為空白!");return false;}
var content = $("#content").val();
if(content==""){
alert("內容不可為空白!");return false;}
$("#submit").attr("readonly",true);
},  // pre-submit callback 
success: function(responseText, statusText, xhr, $form){
var json = jQuery.parseJSON(responseText);
if (json.success == false)
{
alert(json.msg);
}else
alert(json.msg);
},  // post-submit callback 
error:function(jqXHR, textStatus, errorThrown){
alert("伺服器端錯誤!");
},
complete:function(jqXHR, textStatus)
{
$("#submit").attr("readonly",false);
}
}); 
}); 
});
</script>
</head>
<body>
<table width="100%" height="100%">
<tr valign="middle" ><td align="center">
<form id="myform" action="postAction.jsp" method="post">
<table>
<thead><tr><th colspan="2" style="background-color:gray">YSLIFES測試</th></tr></thead>
<tbody>
<tr><td style="width:100px"><span style="color:red">*</span>類型</td>
<td><select id="kind" name="kind"><option value="1">關於產品</option><option value="2">網站問題</option><option value="3">其它</option></select></td></tr></tbody>
<tr><td><span style="color:red">*</span>標題</td>
<td><input type="text" name="title" id="title" /></td>
</tr>
<tr><td><span style="color:red">*</span>姓名</td>
<td><input type="text" name="name" id="name" /></td>
</tr>
<tr><td><span style="color:red">*</span>EMAIL</td>
<td><input type="text" name="mail" id="mail" /></td>
</tr>
<tr><td> 電話</td>
<td><input type="text" name="tel" id="tel" /></td>
</tr>
<tr><td colspan="2"><textarea name="content" id="content" cols="30" rows="8"></textarea></td></tr>
<tr><td colspan="2" align="right"><input id="submit" type="submit" value="送出" /></td></tr>
</table></form>
</td>
</tr>
</table>
</body>
</html>

表單傳送資料給Server後,會回傳一個json格式的txt

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%><%
java.sql.Connection con = null;
java.sql.PreparedStatement pst = null;
net.sf.json.JSONObject json = new net.sf.json.JSONObject();
json.put("success",false);
json.put("msg","異常狀態");
try
{
String name = com.yslifes.util.StringUtils.nvl(request.getParameter("name"),"");
String title = com.yslifes.util.StringUtils.nvl(request.getParameter("title"),"");
String email = com.yslifes.util.StringUtils.nvl(request.getParameter("mail"),"");
String tel = com.yslifes.util.StringUtils.nvl(request.getParameter("tel"),"");
String kind = com.yslifes.util.StringUtils.nvl(request.getParameter("kind"),"");
String content = com.yslifes.util.StringUtils.nvl(request.getParameter("content"),"");
String sql = "insert into contact (kind,title,user_name,user_email,user_tel,content) "+ 
"values (?,?,?,?,?,?)";
con = com.yslifes.db.DBPool.getConnection();
pst = con.prepareStatement(sql);
int idx = 0 ;
pst.setString(++idx,kind);
pst.setString(++idx,title);
pst.setString(++idx,name);
pst.setString(++idx,email);
pst.setString(++idx,tel);
pst.setString(++idx,content);
pst.executeUpdate();
json.put("success",true);
json.put("msg","完成!");
}catch(java.sql.SQLException e)
{
json.put("msg",e.getMessage());
e.printStackTrace();
}finally
{
com.yslifes.db.DBClose.close(con);
}
out.print(json.toString());
%>

與資料庫連線的方式可以參考Java讀取檔案匯入MySQL資料庫/取得MySQL資料存入檔案

程式碼下載

 

 

發表迴響