带有不同按钮的原型ajax更新程序div_Ajax_Button_Html_Prototypejs

带有不同按钮的原型ajax更新程序div

ajax button html

带有不同按钮的原型ajax更新程序div,ajax,button,html,prototypejs,Ajax,Button,Html,Prototypejs,我正在学习，但我找不到这有什么不对！我希望div2从div1中的表单formulario中获取数据。我想知道哪个项目被选中，哪个按钮被点击主html文件： <script src="utils/Scripts/prototype.js" type="text/javascript"></script> <script type="text/javascript"> function sendf(formul, divi, php) {

我正在学习，但我找不到这有什么不对！我希望div2从div1中的表单formulario中获取数据。我想知道哪个项目被选中，哪个按钮被点击

主html文件：

<script src="utils/Scripts/prototype.js" type="text/javascript"></script>
<script type="text/javascript">

function sendf(formul, divi, php)
    {
     var params = Form.serialize($(formul));                    
     new Ajax.Updater(divi, php, {method: 'post', parameters: params, asynchronous:true});
    }
</script>

</head>

<body>
<div id="div1"> 
contenido div1
<form id="formulario" method="POST">
<select size="3" id="lista" onchange="sendf('formulario', 'div2', 'prodiv1.php');"> 
<option>elemento 1</option>
<option>elemento 2</option>
<option>elemento 3</option>
</select>
<input type="button" id="b1" value="bot1" onclick="sendf('formulario', 'div2', 'prodiv1.php');" />
<input type="button" id="b2" value="bot2" onclick="sendf('formulario', 'div2', 'prodiv1.php');" />
</form>


<div id="div2" style="background: blue;"> 
contenido div2
</div>
</div>
</body>
</html>


函数sendf（formul、divi、php）
{
var params=Form.serialize（$（formul））；
新的Ajax.Updater（divi，php，{method'post'，参数：params，异步：true}）；
}
康特尼多1区
元素1
元素2
元素3
康特尼多分区2

php文件prodiv1.php：

<?
echo 'exec: prodiv1.php<br>';
print_r($_POST);
echo serialize($_POST);

if (isset($_POST))
    {
    foreach ($_POST as $key=>$value)
        {
        echo $key.'=>'.$value."<br>";
        }
    }


echo "select: ".$_POST['lista'];

if (isset($_POST['b1'])) {echo 'click: boton1';} else {echo 'click: boton2';}
?>

我已经尝试了很多方法，并且看到它可以通过事件观察者、httprequests等来实现，但是我需要的是非常简单的，而且可能有一种优雅的方法来解决它。。。我提前感谢任何帮助！祝您有个美好的一天。

guillem

编辑查看您发布的其余代码，这真的需要AJAX吗？当然，您只是用页面上已经存在的数据更新现有页面，服务器在这方面没有真正的作用吗

很抱歉再次深入jQuery，但这应该允许您在没有ajax请求的情况下将值放入“div2”

    $(document).ready(function() {
        $("input").click(function(e) {
            $("#div2").html($(this).attr("id")+" clicked<br />");
            updateList();
        });
    });
    function updateList() {
       $("#div2").append($("#lista").val() + " selected");
    }

$（文档）.ready（函数（）{
$（“输入”）。单击（函数（e）{
$（“#div2”）.html（$（this.attr（“id”）+”单击
）；
updateList（）；
});
});
函数updateList（）{
$（“#div2”）.append（$（“#lista”）.val（）+“selected”）；
}

用通俗易懂的英语，这段代码表示“如果单击了输入元素，则使用输入变量id更新div2的值，并将列表中的选定值附加到结果中”。希望这对你有意义：）

如果您需要一种简单、优雅的方法来使用AJAX解决这个问题，请使用jQuery库的

AJAX

和

post

方法。有关更多信息，请看一看，它将显著减少代码的大小和复杂性

如果您不需要以某种方式实际处理表单内容，那么就不需要使用Ajax传递到PHP脚本。根据您希望在div 2中显示的内容，您可以执行如下简单操作：

function sendf()
{
 var listvar = $('lista').value;
 $('div2').update('select menu value was ' + listvar);
}

这显然缺少很多细节，可以进行大量改进，但它应该强调一个事实，即不需要AJAX。

无需切换到jQuery，Prototype比adequateYeah更重要，jQuery绝对不需要，我的原始帖子是关于AJAX的，在jQuery中执行和描述AJAX要简单得多，就像上面的操作一样（少写多做）。你真的需要表单提交到服务器端表单处理脚本吗？@jay:他使用的是prototype，所以我的代码是正确的，你的代码是jqueryIt可能值得在你的回答中提到你的javascript库，因为最初并不清楚你使用的是prototype，这段代码没有它就无法运行：）是的，但他已经用prototype标记了他的问题，他的代码示例链接到prototype，我想说这很清楚。嗯，我只是个瞎子，甚至在主题/代码中都没有看到这一点+伙计，干得好