事件监听_event.observe(window, 'load', function() {-优快云博客

本文链接：https://blog.youkuaiyun.com/liangpei2008/article/details/5611306

本文介绍了一个使用Prototype库实现Ajax请求的示例。通过监听按钮点击事件来触发Ajax请求，并将服务器返回的内容显示在指定的HTML元素中。文章还展示了如何在PHP后端处理请求并返回响应。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

监听元素的某事件，与<input id="testbutton" name="testbutton" type="button" onclick="replaceDiv();">等效

停止元素监听使用Event.stopObserving(参数与监听一致);

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Prototype Ajax</title> <mce:script type="text/javascript" src="prototype.js" mce_src="prototype.js"></mce:script> <mce:script type="text/javascript" src="ajax.js" mce_src="ajax.js"></mce:script> </head> <body> <form method="post" action="http://192.168.0.109:8888/magento/greeting.php" id="test-form" name="test-form"> <div id="div1"> <label for="name">Enter your name:</label> <input id="username" name="username" type="text" /> <input id="password" name="password" type="text" /> <input id="testbutton" name="testbutton" type="button" value="testbutton" > </div> <div id="divResult"></div> </form> </body> </html>

Ajax

Event.observe(window, 'load', init, false); function init(){ Event.observe('testbutton', 'click', replaceDiv); } function replaceDiv() { var myAjax = new Ajax.Request( 'http://192.168.0.109:8888/magento/greeting.php', { method: 'post', onComplete: showResponse , parameters: 'username='+$F('username') } ) ; }; function showResponse(response) { $('divResult').innerHTML = response.responseText; } ;

greeting.php

<?php $the_name = $_POST['username']; if ( empty($the_name)){ echo "<p>please input the name</p>"; }else { echo ""; } ?>