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

回答

相關問題