JQuery AJAX - テキストボックスとドロップボックスを埋め込む

Question

JQuery AJAXを初めて使用しているので、構文に詳しくはわかりません。今私は、データベースから値のセットを引っ張って、ドロップダウンボックスを設定しています。私がAJAXに必要とするのは、ドロップダウンボックスから選択するときにハードコーディングされた情報を持つ他の3つのフィールドを設定することです。 AJAXが正常に動作するようになったら、データベースを照会して、ドロップダウンからの選択に基づいて結果を返すことができます。

<div class="panel-body"> 
    <div class="form-group"> 
     <label for="nomName" class="col-sm-3 control-label">Name:</label> 
     <div class="col-sm-8">    
      <input type="text" class="form-control" data-validation="required" name="nomName" id="nomName" placeholder="Name" maxlength="50">   
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="nomTitle" class="col-sm-3 control-label">Title:</label> 
     <div class="col-sm-8"> 
      <input type="text" class="form-control" data-validation="required" name="nomTitle" id="nomTitle" placeholder="Title" maxlength="50"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="nomDept" class="col-sm-3 control-label">Department:</label> 
     <div class="col-sm-8"> 
      <select class="form-control" name="nomDept" id="nomDept"> 
       <option value="" disabled selected>Select a Department...</option> 
       <option value="Building Services">Building Services</option> 
       <option value="Construction Management">Construction Management</option> 
      </select> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label for="nomGUID" class="col-sm-3 control-label">AU Email/GUID:</label> 
     <div class="col-sm-8"> 
      <select class="form-control" name="nomGUID" id="nomGUID"> 
       <option value="" disabled selected>Select a Person...</option> 
       <?php 
       while($row = mssql_fetch_array($user_list)){ 
        echo "<option value=\"" . $row['id'] . "\">" . $row['id'] . "</option>"; 
       } 
       ?> 
      </select> 
     </div> 
    </div> 
</div> 

ここに私のAJAXがあります。私はそれが正しいのではないことを知っています。だから、もし誰かが解決策を提示したら、それは何かの裏にある説明に感謝します。ありがとう。

$(function() { 
    var options = { 
     "Option 1": "value 1", 
     "Option 2": "value 2", 
     "Option 3": "value 3" 
    } 
    $('#nomGUID').change(function() { 
     $.ajax({ 
      url: 'test.php', 
      success: function('#options') { 
       $('#nomDept').empty(); 
       $('#nomTitle').html('Test AJAX'); 
      } 
     }) 
    } 
} 

Answer 1

"成功"は、コールバックハンドラを渡すためのものです。匿名関数または名前付き関数を使用してハンドラーを実装できます。あなたが持っている構文は違法で、どちらもしません。

は、無名関数をよく読んで：私はJSONレスポンスのいくつかの種類を返しますtest.phpをするためにあなたのAJAX呼び出しを想定してい http://www.w3schools.com/js/js_function_definition.asp

。例：

{ 
    "title": "New Title", 
    "foo": "bar", 
    "baz": "qux", 
    "departments": [ 
     "Building Services", 
     "Construction Management" 
    ] 
} 

成功コールバック関数は、名前付き関数を使用して実装できます。コールバックの内部では、オプションを設定します。

$.ajax({ 
    url: 'test.php', 
    success: myAjaxSuccessHandler 
}); 

function myAjaxSuccessHandler(data) { 
    $('#nomDept').empty().append(
     $('#nomTitle').html(data.title); 

     $.map(departments, function(element) { 
      return $('<option></option>').val(element).text(element); 
     }) 
    ); 
} 

また、このように、無名関数を使用することを選択できます。

$.ajax({ 
    url: 'test.php', 
    success: function(data) { 
     $('#nomTitle').html(data.title); 

     $('#nomDept').empty().append(
      $.map(departments, function(element) { 
       return $('<option></option>').val(element).text(element); 
      }) 
     ); 
    } 
}); 

Answer 2

特定のドロップダウンボックスにデータを追加します。

content += "<option value=1>1</value>"; 
content += "<option value=2>2</value>"; 
content += "<option value=3>3</value>"; 
$('#nomGUID').change(function() { 
     $.ajax({ 
      url: 'test.php', 
      success: function(response){ 
       $('#nomDept').empty(); 
       $('#nomTitle').append(content); 
      } 
     }) 
    }