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

【问题标题】：Triggering a Rest API call with a JQuery Mobile button使用 JQuery Mobile 按钮触发 Rest API 调用
【发布时间】：2017-12-13 12:14:39
【问题描述】：

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

<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>

【问题讨论】：

你可以尝试点击按钮而不是段落吗？像这样$("#generator_button").on("tap",function(){
不，没有帮助

标签： javascript jquery ajax jquery-mobile

【解决方案1】：

请注意：在您的标记中有一个Flip switch 类型为checkbox，而不是按钮，所以我相信您最好检查底层checkbox 的状态，而不是坚持tap 事件.

参考：jQuery Mobile Flip switch

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

这是一个例子：

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
  }
});

<!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>

【讨论】：

有趣...如何通过相同的切换将它与 generator_off 端点合并？
您只需要 else 部分...（顺便说一句，您的 JS 非常生锈！:) 很高兴您发现这很有趣！答案已更新。这对您有帮助吗？
啊，是的，找到了方法.. 是的，我已经快 2 年没碰它了.. 已经有一段时间了 :) 感谢您的帮助！

【解决方案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!');
      }
    }
  });
});

【讨论】：

基于jQuery AJAX GET documentation 你可以这样试试吗？ $.get({ 'url' : '192.168.8.110:5000/generator_on', 'success' : function(data) { if (data == "success") { alert('request sent!'); } } });它在我的浏览器中触发，但我没有那个端点
好的，所以我改为'url'：'192.168.8.110:5000/generator_on'，我现在得到：net::ERR_BLOCKED_BY_CLIENT

【解决方案3】：

好的，所以我不得不将 url 更改为：'http://192.168.8.110:5000/generator_on 并在没有我提到的广告屏蔽的浏览器上对其进行测试以使其正常工作！

【讨论】：