代码之家  ›  专栏  ›  技术社区  ›  Naveed

如何在下拉更改事件上调用AJAX请求?

  •  3
  • Naveed  · 技术社区  · 14 年前

    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <script type="text/javascript" src="ajax.js"></script>
    
    <a href='one.php' class='ajax'>One</a>
    <a href='two.php' class='ajax'>Two</a>
    
    <div id="workspace">workspace</div>
    

    one.php

    $arr = array ( "workspace" => "One" );
    echo json_encode( $arr );
    

    $arr = array( 'workspace' => "Two" );
    echo json_encode( $arr );
    

    jQuery(document).ready(function(){
        jQuery('.ajax').live('click', function(event) {
            event.preventDefault();
            // load the href attribute of the link that was clicked
            jQuery.getJSON(this.href, function(snippets) {
                for(var id in snippets) {
                    // updated to deal with any type of HTML
                    jQuery('#' + id).html(snippets[id]);
                }
            });
        });
    });
    

    以上代码工作正常。当我单击链接“One”时,字符串“One”加载到workspace DIV中;当我单击链接“Two”时,字符串“Two”加载到workspace DIV中。

    问题:

    谢谢

    2 回复  |  直到 14 年前
        1
  •  3
  •   Sarfraz    14 年前

    更改代码如下:

    jQuery('#dropdown_id').live('change', function(event) {
        jQuery.getJSON($(this).val(), function(snippets) {
            for(var id in snippets) {
                // updated to deal with any type of HTML
                jQuery('#' + id).html(snippets[id]);
            }
        });
    });
    

    <select id="dropdown_id">
      <option value="one.php">One</option>
      <option value="two.php">Two</option>
    </select>
    
        2
  •  0
  •   Bala kumar    14 年前

    在下拉列表中指定href as列表项值。一旦更改了dropdown,就进行ajax调用。

    类名“ajax”仅供参考(如果您想处理多个元素的事件,这很有用)。