[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資料存入檔案

程式碼下載

發表迴響取消回覆