點擊button傳遞消息，但是頁面不跳轉的解決方法

　　最近在做一個物聯網的項目時遇到的問題：界面上有很多控制開/關燈的button，通過點擊button來控制各個燈的亮滅。我需要將獲取的不同的點擊事件消息，以Socket通信的方式發送給硬件端的服務監聽程序。但是當點擊button將消息發送到某個Servlet中時，界面會跳轉。

解決方案：

1.解決頁面跳轉

用jquery+ajax發送Get請求。

用法： $.get( url, [data], [callback] )

參數：

url (String) :  發送請求的URL地址.

data (Map) : (可選) 要發送給服務器的數據，以 Key/value 的鍵值對形式表示，會做為QueryString附加到請求URL中。

callback (Function) : (可選) 載入成功時回調函數(只有當Response的返回狀態是success才是調用該方法)。

2.解決當點擊“打開”按鈕后，按鈕變為灰色不可點；當點擊“關閉”按鈕后，按鈕變為灰色不可點，“打開”按鈕變為可點

　可在js中通過改變button的disabled屬性，來動態控制按鈕的狀態。當disabled=true時，按鈕不可點；當disabled=false時，按鈕可點。

具體解決過程：

web端界面

前端關鍵代碼;

<script type="text/javascript" src="jquery-2.1.1.js"></script>
<script type="text/javascript">
  function on(led){
      var btnOn = document.getElementById(led);
      var led2 = led.split('_');
      var btnOff =  document.getElementById(led2[0]+"_off");
       btnOn.disabled = true;
       if(btnOff.disabled)
       btnOff.disabled = false;
      $.get("/testweb/ControlServlet?value="+led);
  }
 
  function off(led){
      var btn = document.getElementById(led);
      var led2 = led.split('_');
      var btnOn =  document.getElementById(led2[0]+"_on");
      btn.disabled=true;
      if(btnOn.disabled)
      btnOn.disabled = false;
      $.get("/testweb/ControlServlet?value="+led);
  }
</script>

Servlet接收消息並將消息傳給客戶端

public class ControlServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
            String value = request.getParameter("value");
            //System.out.println("收到請求！="+value);
            SocketClient.clientRequst(value);
    }

}

客戶端通過Socket通信將控制消息發給硬件端的服務監聽程序

public class SocketClient {
   
    public static void clientRequst(String info) {
      
        try {
            //1. 創建客戶端Socket，指定服務器地址和端口
            Socket socket = new Socket("localhost",8899);
            //2. 獲取輸出流，向服務器發送信息
            OutputStream os = socket.getOutputStream();
            PrintWriter pw = new PrintWriter(os);
            //System.out.println("將要發送="+info);
            
            pw.write(info);
            pw.flush();
            socket.shutdownOutput();
            pw.close();
            os.close();
            socket.close();
            
        } catch (UnknownHostException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
 
   }
}

 

JS簡單模擬HTTP請求: http://www.qttc.net/201208184.html