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

时间：2023-03-10 01:44:07
点击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端界面

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

前端关键代码;

 <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

相关文章