jQuery Ajax调用触发onClick

我是JavaScript，Jquery和Ajax的新手。这是我正在尝试做的：jQuery Ajax调用触发onClick

我在我的HTML代码中有一个按钮，我想触发一个AJAX调用，它将向本地机器上运行的Web服务器发出GET请求。

这是我到目前为止有：

JS代码：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
 

 

 
<script type="text/javascript"> 
 

 

 
$('call').click(function() { 
 
    alert("hiii"); 
 

 
    $.ajax({ 
 
    'url' : 'localhost:8080/blah/blah/blah', 
 
    'type' : 'GET', 
 
    beforeSend: function() { 
 
       alert(1); 
 
      }, 
 
    error: function() { 
 
       alert('Error'); 
 
      }, 
 
    'success' : function(data) { 
 
     if (data == "success") { 
 
     alert('request sent!'); 
 
     } 
 
    } 
 
    }); 
 
}); 
 

 
</script>

HTML代码：

<body> 
 
    <div> 
 
    <form> 
 
     <div class = "buttons"> 
 
      <input type="submit" id="call" value="call"> 
 
     </div> 
 
    </form> 
 
    </div> 
 
</body>

有人可以帮我吗？提前致谢！

来源

2015-06-20 ar88

什么错？这个URL看起来很可疑 - 可能希望在其上放置一个“http：//”或“https：//”。 – Cymen

好吧，纠正我，如果我错了，我应该至少看到警报（'hiii'）;当我点击按钮时，对吧？我甚至没有达到这一步。 – ar88

您的代码有几个问题。首先，你的选择器没有指向任何类或ID。您需要分别使用.call或#call作为课程或ID。其次，你的脚本没有document.ready函数。看看下面的代码。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    // document.ready function 
    $(function() { 
     // selector has to be . for a class name and # for an ID 
     $('.call').click(function(e) { 
      e.preventDefault(); // prevent form from reloading page 
      alert("hiii"); 

      $.ajax({ 
       'url' : 'localhost:8080/blah/blah/blah', 
       'type' : 'GET', 
       beforeSend: function() { 
        alert(1); 
       }, 
       error: function() { 
        alert('Error'); 
       }, 
       'success' : function(data) { 
        if (data == "success") { 
         alert('request sent!'); 
        } 
       } 
      }); 
     }); 
    }); 
</script>

来源

2015-06-20 05:22:14 NightOwlPrgmr

由于@NightOwlPrgmr提到你的选择器是错误的。要解决这个问题，你必须使用#call而不是.call，因为这是一个id而不是class属性。此外，Document.ready函数将确保您的代码在加载所有html元素后运行。这将减轻尝试使用尚未创建的元素的风险。类似于上面的一个示例代码是： -

<head> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"> 
    </script> 
</head> 
<body> 
    <div> 
     <form> 
      <div class = "buttons"> 
       <input type="submit" id="call" value="call"> 
      </div> 
     </form> 
    </div> 
    <script type="text/javascript"> 
     // document.ready function 
     $(document).ready(function() { 
      // selector has to be . for a class name and # for an ID 
      $('#call').click(function(e) { 
       e.preventDefault(); // prevent form from reloading page 
       alert("hiii"); 

       $.ajax({ 
        'url' : 'localhost:[port_number_web_server]/blah/blah/blah', 
        'type' : 'GET', 
        beforeSend: function() { 
         alert(1); 
        }, 
        error: function() { 
         alert('Error'); 
        }, 
        'success' : function(data) { 
         if (data == "success") { 
          alert('request sent!'); 
         } 
        } 
       }); 
      }); 
     }); 
    </script> 
</body>

来源

2017-09-20 12:25:56

jQuery Ajax调用触发onClick

回答

相关问题