ドロップダウンメニューAjax呼び出しが機能しない

Question

ドロップダウンメニューの選択項目の値を取得して、同じページ（フォーム）をAjax呼び出しで更新しようとしています。たとえば、入力フィールドの新しいセットのように、ユーザーの選択に基づいて余分なフォームフィールドを表示するには、「NEW」が選択されているが、これまでにない。

フォーム：

<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が適切に組み込まれています）

Answer 1

あなたのajax呼び出しでURLを指定してください。 URLなしでは動作しません。

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

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

     }); 
    }); 

Answer 2

ajax呼び出しには2つの構文があります。

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

それとも

$.ajax([setting]) 

しかし、第二の方法では、設定のオブジェクトにURLを指定する必要があります。

と$（この）.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'); 
     } 
    }); 
}); 

NB：あなたの現在のHTMLで 、$（この）.valを（）空の文字列と常に等しくなります。 あなたが選択したオプションの使用のテキストが必要な場合：

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

Answer 3

私は、このコードは、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> 

これはクライアント側のコードです。サーバー側では、入力パラメーターを受け取るようにスクリプトを構成する必要があります。