下拉菜單Ajax調用不起作用

我想要獲取下拉菜單中所選項目的值，以相應地用Ajax調用來更新同一頁面（表單）。例如，要顯示基於用戶選擇的額外表單字段，如同一組新的輸入字段，如果選擇了「新建」，但我還沒有到此爲止。下拉菜單Ajax調用不起作用

形式：

<form action="#" method="post" class="form" id="insertItem"> 
    <fieldset> 
     <dl> 
      <dt> 
       <label for="manufacturer">Manufacturer</label> 
      </dt> 
      <dd> 
       <select size="1" name="manufacturer" id="manufacturer"> 
        <option value="">- Choose -</option> 
        <option value="">-- NEW --</option> 
        <option value="">Option 1</option> 
        <option value="">Option 2</option> 
        <option value="">Option 3</option> 
        <option value="">Option 4</option> 
       </select> 
      </dd> 
     </dl> 
     (...) 
     more items 
     (...) 
</form>

腳本：

$('#manufacturer').change(function() { 
     var val = $("#manufacturer option:selected").text() 
     $.ajax({ 
      url : "path_to/file.php", 
      type : "GET", 
      data : { selectedValue : val}, 
      success : function(response) { 
       console.log("check " + response); 
//   $('#test').html(response); 
      }, 
      error: function() { 
       console.log('Error'); 
       alert('Error'); 
      } 
     }); 
    });

控制檯顯示什麼，要麼沒有錯誤。它也沒有出現在網絡標籤中。我做錯了什麼？（jQuery 1.12.4包含在內並且正常工作。）

來源

2016-07-26 dly

您是否在['network']（https://developers.google.com/web/tools/chrome-devtools/profile/network-performance/resource-loading?hl=en）選項卡中看到ajax調用在Chrome中？ –

我正在使用Firebug，但沒有..它沒有開火。 – dly

你沒有在你的ajax調用中指定url。這不是表單文章，而是ajax調用某處。 – derloopkat

在您的ajax調用中指定url。沒有URL它不起作用。

$('#manufacturer').change(function() { 
    myVal = $(this).val(); 

     $.ajax({ 
     url   : 'ajax_process.php', 
     method  : 'post', 
     data  : 
     { 
      variable : myVal 
     }, 
     success  : function(response) 
     { 

     }); 
    });

來源

2016-07-26 09:16:45

那麼沒有網址錯誤的例子？或者那是什麼樣子？ – dly

@dly請參閱http://stackoverflow.com/questions/9634343/jquery-sending-post-data-without-defining-url但是，除了url之外，您的代碼還有其他問題。 – derloopkat

您有2個語法調用ajax。

$.ajax("url", [setting])

或者

$.ajax([setting])

但在第二方面，你需要指定設置的目標網址。

和$（本）.VAL（）是錯誤的範圍，拯救「這個」前Ajax調用：

$('#manufacturer').change(function() { 
    var val = $(this).val() ; 
    $.ajax({ 
     url : "myurl", 
     type:'POST', 
     data : { selectedValue : val}, 
     success : function(response) { 
      console.log("check " + response); 
//   $('#test').html(response); 
     }, 
     error: function() { 
      console.log('Error'); 
      alert('Error'); 
     } 
    }); 
});

注：根據您當前的HTML，$（本）.VAL（）將永遠等於空字符串。如果你想選擇的選項，使用的文字：

var val = $("#manufacturer option:selected").text()

來源

2016-07-26 09:24:35

我試過你的方式，但仍然沒有做任何事情。我包含了一個已經正常工作的php文件，但它並未顯示在控制檯或網絡中。 – dly

@dly在你的PHP你期待一個名爲selectedValue的參數？你設置了網址嗎？ – derloopkat

是的。我的猜測是，腳本根本不會被調用。即使從一個工作的C＆P它不。 – dly

我已經測試此代碼調用一個HTTP處理程序（請在代碼替換URL）。你的代碼有幾個問題。您正在使用Ajax，但未指定url，該調用是通過POST，但未設置content-type。除此之外，當您嘗試獲取選定值時，它將變爲空，因爲html標記不是爲選項聲明值，而是單獨聲明文本。所以，我改變了jQuery代碼來取代選定的文本。

<script type="text/javascript"> 
    $('#manufacturer').change(function() { 
     $.ajax({ 
      url: 'http://localhost:9145/Handler.ashx', 
      type: 'POST', 
      contentType: 'application/x-www-form-urlencoded', 
      data: { selectedValue: $('#manufacturer option:selected').text() }, 
      success: function (response) { 
       console.log("check " + response); 
       alert("check " + response); 
      }, 
      error: function() { 
       console.log('Error'); 
       alert('Error'); 
      } 
     }); 
    }); 
</script>

這只是客戶端代碼。在服務器端，您的腳本應配置爲接收輸入參數。

來源

2016-07-26 09:40:55 derloopkat

下拉菜單Ajax調用不起作用

回答

相關問題