將AJAX用於多個選擇並且不提交按鈕

好吧，現在我有一個有兩個選擇按鈕的頁面。一旦設置了它們，我希望頁面自動更新。然後，無論何時每次選擇新選項，頁面都會自動更新。這是我的HTML：將AJAX用於多個選擇並且不提交按鈕

<form action="" method="POST" id = "multiple"> 
    <select name="op" id="op"> 
     <?php 
      require('C:\www\php\connect.php'); 
      require('C:\www\php\stuff1.php'); // populates first select bar 
     ?> 
    </select> 

    <br> 

    <select name="op2" id="op2"> 
     <? 
      php require('C:\www\php\stuff2.php'); //populates second select bar 
     ?> 
    </select> 
</form>

這是我的jQuery BEFORE。眼下這一點，它會自動一旦選定了兩個項目提交頁面：

$(document).ready(function() { 
    $('#op,#op2').on('change', function() { 
     if ($('#op').val() && $('#op2').val()) { 
      $("#multiple").submit(); 
     } 
    }); 
});

這裏是我的（不工作）Ajax響應，我想嘗試實施做什麼，我在一開始提到的：

$(document).ready(function (e) { 
    $('#op,#op2').on('change', function() { 
     $("#multiple").submit(); 
     var url = "C:\www\php\stuff2.php"; 
     alert("show me signs of life"); // show response 
     $.ajax({ 
       type: "POST", 
       url: url, 
       data: $("#multiple").serialize(), 
       success: function(data) 
       { 
        alert(data); // show me something 
       } 
      }); 

     e.preventDefault(); 
    } 
});

我到哪裏去錯了？我很確定我的URL情況有點搞砸了，因爲我如何使用多個php文件來填充框，但我覺得這並不重要。如果有幫助，魔術發生的位置在stuff2.php中，所以這是我所包含的唯一一個。

來源

2016-02-04 John

我不認爲你可以對硬盤上的本地文件做ajax ie.var url =「C：\ www \ php \ stuff2.php」; '因爲瀏覽器不允許它，因爲它被認爲是跨域 –

所以'var url =「/php/stuff2.php」;'更好？ – John

是的，因爲它會在同一個域名上查找它。由於安全性，瀏覽器也不允許訪問硬盤驅動器上的本地文件，所以使用它應該工作的相對url。我假設你使用的是PHP，你有一臺運行在本地主機上的php服務器 –

的代碼：

$("#multiple").submit()

將執行HTTP POST請求發送到當前的URL。如果您正在進行AJAX調用，則不需要它。

只要有：

$.ajax({ 
    type: "POST", 
    url: url, 
    data: $("#multiple").serialize(), 
    success: function(data) 
    { 
      alert(data); // show me something 
    } 
});

應該只是罰款。

來源

2016-02-04 16:14:56

）具體來說，我試圖更新我的c3js圖表。我做了你所做的事情，並且我得到了警報。現在是圖表本身並沒有像他們應該更新的那樣 – John

您是否正在更新與圖表相關的對象？請看這裏：[折線圖]（http://c3js.org/samples/simple_multiple.html ）。您應該能夠通過使用相應對象的'load'方法爲其提供數據來更新圖表。 –

是的。但是，如何從我的更新表單獲取輸入，然後使用load方法更新圖表ajax？ – John

將AJAX用於多個選擇並且不提交按鈕

回答

相關問題