如何通过表单输入字段的值来使用AJAX / jQuery的脚本？ [英] How to pass values of form input fields to a script using AJAX/jQuery?

问题描述

我目前的code是这样的。

的index.php

 ＆LT;脚本类型=文/ JavaScript的SRC =jQuery的-1.4.2.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =ajax.js＆GT;＆LT; / SCRIPT＆GT;

＆LT;选择一个id =dropdown_id＆GT;
＆LT;期权价值=one.php＆GT;一个实施; /选项＆GT;
＆LT;期权价值=two.php＆GT;二＆LT; /选项＆GT;
＆LT; /选择＆GT;

＆LT; D​​IV ID =工作区＆GT;工作区和LT; / DIV＆GT;
 

one.php

  $ ARR =阵列（工作区=＆gt;中一）;
回声json_en code（$ ARR）;
 

two.php

  $ ARR =阵列（'工作区'=＆gt;中二）;
回声json_en code（$ ARR）;
 

JS

 的jQuery（＃dropdown_id）。住（'变化'，函数（事件）{
    jQuery.getJSON（$（本）.VAL（）函数（片段）{
        为（在片段VAR ID）{
            //更新，以应付任何类型的HTML
            jQuery的（'＃'+ ID）。html的（片段[ID]）;
        }
    }）;
}）;
 

以上code完美地工作。当我选择一个从下拉菜单，然后one.php是使用JSON加载工作区格。当我选择两则two.php装在工作区的DIV。

我想下一步：

 现在我想添加另一个下拉列表中的index.php：
＆LT;选择一个id =myinputNAME =阿尔法＆GT;
  ＆LT;期权价值=一个＆gt;在＆LT; /选项＆GT;
  ＆LT;期权价值=B＆GT; B＆LT; /选项＆GT;
  ＆LT;期权价值=一个＆GT; C＆LT; /选项＆GT;
  ＆LT;期权价值=B＆GT; D＆LT; /选项＆GT;
＆LT; /选择＆GT;
 

当用户选择一个下拉那么该脚本（值）的任何选项应该被装入第二下拉的工作空间DIV的价值。

例如：

当我选择一从第一个下拉那么：

one.php

  $ ARR =阵列（工作区=＆GT; $ _GET ['阿尔法']）; //如果加载A
回声json_en code（$ ARR）;
 

现在当我选择 B 从第二个下拉菜单，然后：

one.php

  $ ARR =阵列（工作区=＆GT; $ _GET ['阿尔法']）; //应该载入B
回声json_en code（$ ARR）;
 

解决方案

我希望它可以帮助你：

one.php

  $ ARR =阵列（'工作区'=＆GT;'一'）;
如果（使用isset（$ _ GET ['myinput_val']））
{
     $常用3 ['工作空间'] = $ _GET ['myinput_val'];
}
回声json_en code（$ ARR）;
 

JS

  $（'＃myinput）。住（'变化'，函数（事件）{
$ .getJSON（one.php，{myinput_val：$（本）.VAL（）}，功能（片段）{
    为（在片段VAR ID）{
        //更新，以应付任何类型的HTML
        $（'＃'+ ID）。html的（片段[ID]）;
    }
}）;
}）;
 

My current code is like this.

index.php

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ajax.js"></script>

<select id="dropdown_id">
<option value="one.php">One</option>
<option value="two.php">Two</option>
</select>

<div id="workspace">workspace</div>

one.php

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

two.php

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

JS

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]);
        }
    });
});

Above code is working perfectly. When I select One from dropdown then one.php is loaded in workspace DIV using JSON. When I select Two then two.php is loaded in workspace DIV.

What I want to do next:

Now I want to add another dropdown in index.php:
<select id="myinput" name="alpha">
  <option value="a">a</option> 
  <option value="b">b</option>
  <option value="a">c</option>
  <option value="b">d</option>
</select>

When user select any option from first dropdown then that script(value) should be loaded with the value of second dropdown in workspace DIV.

For example:

When I select One from first dropdown then:

one.php

$arr = array ( "workspace" => $_GET['alpha'] ); // Should load 'a'
echo json_encode( $arr );

Now When I select b from second dropdown then:

one.php

$arr = array ( "workspace" => $_GET['alpha'] ); // Should load 'b'
echo json_encode( $arr );

解决方案

I hope it can help you :

one.php

$arr = array ( 'workspace' => 'One');
if(isset($_GET['myinput_val']))
{
     $arr['workspace'] = $_GET['myinput_val'];
}
echo json_encode( $arr );

JS

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

这篇关于如何通过表单输入字段的值来使用AJAX / jQuery的脚本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！