点击button传递消息，但是页面不跳转的解决方法

时间：2024-03-12 09:36:54

　　最近在做一个物联网的项目时遇到的问题：界面上有很多控制开/关灯的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端界面

前端关键代码;

 1 <script type="text/javascript" src="jquery-2.1.1.js"></script>
 2 <script type="text/javascript">
 3   function on(led){
 4       var btnOn = document.getElementById(led);
 5       var led2 = led.split(\'_\');
 6       var btnOff =  document.getElementById(led2[0]+"_off");
 7        btnOn.disabled = true;
 8        if(btnOff.disabled)
 9        btnOff.disabled = false;
10       $.get("/testweb/ControlServlet?value="+led);
11   }
12  
13   function off(led){
14       var btn = document.getElementById(led);
15       var led2 = led.split(\'_\');
16       var btnOn =  document.getElementById(led2[0]+"_on");
17       btn.disabled=true;
18       if(btnOn.disabled)
19       btnOn.disabled = false;
20       $.get("/testweb/ControlServlet?value="+led);
21   }
22 </script>

Servlet接收消息并将消息传给客户端

 1 public class ControlServlet extends HttpServlet {
 2 
 3     private static final long serialVersionUID = 1L;
 4     public void doGet(HttpServletRequest request, HttpServletResponse response)
 5             throws ServletException, IOException {
 6             String value = request.getParameter("value");
 7             //System.out.println("收到请求！="+value);
 8             SocketClient.clientRequst(value);
 9     }
10 
11 }

客户端通过Socket通信将控制消息发给硬件端的服务监听程序

 1 public class SocketClient {
 2    
 3     public static void clientRequst(String info) {
 4       
 5         try {
 6             //1. 创建客户端Socket，指定服务器地址和端口
 7             Socket socket = new Socket("localhost",8899);
 8             //2. 获取输出流，向服务器发送信息
 9             OutputStream os = socket.getOutputStream();
10             PrintWriter pw = new PrintWriter(os);
11             //System.out.println("将要发送="+info);
12             
13             pw.write(info);
14             pw.flush();
15             socket.shutdownOutput();
16             pw.close();
17             os.close();
18             socket.close();
19             
20         } catch (UnknownHostException e) {
21             e.printStackTrace();
22         } catch (IOException e) {
23             e.printStackTrace();
24         }
25  
26    }
27 }

 

JS简单模拟HTTP请求: http://www.qttc.net/201208184.html

相关文章