JQueryAJAX-テキストボックスとドロップブラウンボックスへの入力

collint25

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');
            }
        })
    }
}
アンドリュー

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

匿名関数について読む:http//www.w3schools.com/js/js_function_definition.asp

test.phpへのAJAX呼び出しが何らかのJSON応答を返すと想定しています。例えば:

{
    "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);
            })
        );
    }
});

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

jqueryAjaxを使用してテキストボックスのonblurイベントのドロップダウンをバインドする

分類Dev

CodeigniterとjqueryAjax

分類Dev

JqueryajaxとXMLHttpRequest

分類Dev

JqueryAjaxを使用してモデルと2つのチェックボックスリストをコントローラーに投稿する

分類Dev

jQueryajaxリクエストのキューイング/スロットリング

分類Dev

jQueryAJAXテーブル

分類Dev

jqueryajaxを使用したドロップダウンリストの個々の値

分類Dev

CORS jQueryAJAXリクエスト

分類Dev

JQueryajaxの成功範囲

分類Dev

検索テキストボックスのクリアは、jqueryajaxを使用してhtmlテーブルにすべてのデータを表示します

分類Dev

チェックボックスから値を取得し、jqueryajaxで入力する方法

分類Dev

入力テキストボックスからパラメーターを渡すことにより、jQueryAJAXを介してJavaEERESTサービスを呼び出す

分類Dev

jQueryAJAXとPHPを使用したスマートリモートアップロードスクリプトの作成

分類Dev

jqueryajaxを使用したチェックボックスフィルタリング

分類Dev

JqueryAJAXを介したチェックボックスからのPOST配列

分類Dev

クロスオリジンのため、jQueryajaxリクエストがブロックされています

分類Dev

JQUERYAjaxマルチポスト

分類Dev

400(不正なリクエスト)エラー-JQueryAJAXを使用したSpringMVCファイルのアップロード

分類Dev

PHP SymfonyAPIとjQueryAjaxリクエスト

分類Dev

jqueryajaxを使用したLaravelのシンプルなクラッド

分類Dev

Jqueryajaxと同等のチタン

分類Dev

forループ内のJQueryajax()

分類Dev

ループバグのJqueryajax

分類Dev

jQueryAJAXからブートストラップドロップダウンを動的に作成しても機能しません

分類Dev

jqueryajaxとphpについて

分類Dev

データごとにjqueryajax

分類Dev

JQueryAjaxループ遅延

分類Dev

間隔のあるjQueryAJAX

分類Dev

Rails片頭痛のjQueryAJAX POST

Related 関連記事

  1. 1

    jqueryAjaxを使用してテキストボックスのonblurイベントのドロップダウンをバインドする

  2. 2

    CodeigniterとjqueryAjax

  3. 3

    JqueryajaxとXMLHttpRequest

  4. 4

    JqueryAjaxを使用してモデルと2つのチェックボックスリストをコントローラーに投稿する

  5. 5

    jQueryajaxリクエストのキューイング/スロットリング

  6. 6

    jQueryAJAXテーブル

  7. 7

    jqueryajaxを使用したドロップダウンリストの個々の値

  8. 8

    CORS jQueryAJAXリクエスト

  9. 9

    JQueryajaxの成功範囲

  10. 10

    検索テキストボックスのクリアは、jqueryajaxを使用してhtmlテーブルにすべてのデータを表示します

  11. 11

    チェックボックスから値を取得し、jqueryajaxで入力する方法

  12. 12

    入力テキストボックスからパラメーターを渡すことにより、jQueryAJAXを介してJavaEERESTサービスを呼び出す

  13. 13

    jQueryAJAXとPHPを使用したスマートリモートアップロードスクリプトの作成

  14. 14

    jqueryajaxを使用したチェックボックスフィルタリング

  15. 15

    JqueryAJAXを介したチェックボックスからのPOST配列

  16. 16

    クロスオリジンのため、jQueryajaxリクエストがブロックされています

  17. 17

    JQUERYAjaxマルチポスト

  18. 18

    400(不正なリクエスト)エラー-JQueryAJAXを使用したSpringMVCファイルのアップロード

  19. 19

    PHP SymfonyAPIとjQueryAjaxリクエスト

  20. 20

    jqueryajaxを使用したLaravelのシンプルなクラッド

  21. 21

    Jqueryajaxと同等のチタン

  22. 22

    forループ内のJQueryajax()

  23. 23

    ループバグのJqueryajax

  24. 24

    jQueryAJAXからブートストラップドロップダウンを動的に作成しても機能しません

  25. 25

    jqueryajaxとphpについて

  26. 26

    データごとにjqueryajax

  27. 27

    JQueryAjaxループ遅延

  28. 28

    間隔のあるjQueryAJAX

  29. 29

    Rails片頭痛のjQueryAJAX POST

ホットタグ

アーカイブ