Question

这很简单，但我的JS有点生锈.. 我试图通过按下JQuery Mobile元素来触发get请求。我可以看到按钮但未能执行实际的获取请求

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
<form>
    <label for="flip-checkbox-1">Flip toggle switch checkbox:</label>
    <p><input type="checkbox" data-role="flipswitch" name="flip-checkbox-1" id="generator_button"></p>
</form>
</body>

<script>
$("p").on("tap",function(){
  $.ajax({
    'url' : '192.168.8.110:5000/generator_on',
    'type' : 'GET',
    'success' : function(data) {
      if (data == "success") {
        alert('request sent!');
      }
    }
  });
</script>

Answer 1

请注意：在您的标记中有Flip switch类型checkbox，而不是按钮，所以我相信您可以更好地检查基础checkbox的状态而不是粘贴参加tap活动。

参考：jQuery Mobile Flip switch

此外，您可以为整个内容提供JQM页面结构。

以下是一个例子：

＆＃13;

function sendRequest() {
  $.ajax({
    'url': '192.168.8.110:5000/generator_on',
    'type': 'GET',
    'success': function(data) {
      if (data == "success") {
        alert('request sent!');
      }
    }
  });
}

$(document).on("change", "#generator_button", function() {
  var state = $("#generator_button").prop("checked");
  if (state === true) {
    // Flip switch is on
    console.log("Request sent.");
    //sendRequest(); // uncomment
  } else {
    // Flip switch is off
    //...endpoint _off
  }
});

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
  </head>
<body>
  <div id="page-one" data-role="page">
    <div data-role="header" data-position="fixed">
      <h1>Header</h1>
    </div>
    <div role="main" class="ui-content">
      <label for="flip-checkbox-1">Flip toggle switch checkbox:</label>
      <input type="checkbox" data-role="flipswitch" name="generator_button" id="generator_button">
    </div>
    <div data-role="footer" data-position="fixed">
      <h1>Footer</h1>
    </div>
  </div>
</body>
</html>

＆＃13;

Answer 2

您在javascript的最后一行缺少});。

您的javascript代码应如下所示

$("p").on("tap",function(){
  $.ajax({
    'url' : '192.168.8.110:5000/generator_on',
    'type' : 'GET',
    'success' : function(data) {
      if (data == "success") {
        alert('request sent!');
      }
    }
  });
});

Answer 3

好的，所以我不得不将网址更改为：＆＃39; http://192.168.8.110:5000/generator_on并在没有我提到的adblock的浏览器上测试它以使其正常工作！

使用JQuery Mobile按钮触发Rest API调用

3 个答案: