Mootools ajax请求

Question

我需要一个提示，如何使用mootools发出AJAX请求，当选择下拉列表中的某些值时，我的意思是捕获此事件+向外部php页面发出ajax请求。 在这个php页面上我需要运行一个mysql查询。 谢谢。

<form name ="f1" action=""> 
     <select id="myr" NAME ="s1" onChange = "GetSelectedItem()"> 
          <OPTION VALUE = "meshed" selected >-- Please Select --</OPTION> 
          <OPTION VALUE = "girls">Male seeking Female</OPTION> 
          <OPTION VALUE = "mens">Female seeking Male</OPTION> 
          <OPTION VALUE = "mens">Male seeking Male</OPTION> 
          <OPTION VALUE = "girls">Female seeking Female</OPTION> 
     </select> 
</form>

PHP

$dbhost = 'localhost'; 
$dbuser = 'root'; 
$dbpass = ''; 
$conn = mysql_connect($dbhost, $dbuser, $dbpass) or die('Error connecting to mysql');     
$dbname = 'ratings'; 
mysql_select_db($dbname) or die('Error connecting to database'); 
$sql = "TRUNCATE TABLE rabid_ratings"; 
$re = mysql_query($sql) or die(mysql_error()); 
echo "done";

mootools的

<script type="text/javascript">
      window.addEvent('domready',function(){
          var myRequest = new Request({
               url: 'truncate.php',
               method: 'post',
               onRequest: function(){
               },
               onSuccess: function(responseText){
                    alert("done!"+ responseText);
               },
               onFailure: function(){
                    alert("failed");
               }
          });

          $('myr').addEvent('change', function(event){
               event.stop();
               myRequest.send();
          });
      });
</script>

Answer 1

即使您的选择下拉菜单也会添加更改。 让我们将其命名为“mydropdown”：

$('mydropdown').addEvent('change', function(){
     //do your request (AJax) here
});

这是Mootools的演示。 您也可以使用Request.HTML或Request.JSON取决于您要返回的内容。

简单请求W / Mootools

更新：基于您提供的内容的示例

首先，让我们看一下使用以下简单的ajax代码是否正确设置了ajax。 一旦你开始工作，我们就可以探索PHP方面了。 所以，请尝试以下代码：

HTML：

<select id="myr" NAME ="s1"> 
    <OPTION VALUE = "meshed" selected >-- Please Select --</OPTION> 
    <OPTION VALUE = "girls">Male seeking Female</OPTION> 
    <OPTION VALUE = "mens">Female seeking Male</OPTION> 
    <OPTION VALUE = "mens">Male seeking Male</OPTION> 
    <OPTION VALUE = "girls">Female seeking Female</OPTION> 
</select> 

通用truncate php回复我们发送的任何post var：

<?php
  echo $_POST['s1'];
?>

Mootools，成功时应该输出“完成！”：

window.addEvent('domready', function(){
    var myRequest = new Request({
        url: 'truncate.php',
        method: 'post',
        onRequest: function() {
        },
        onSuccess: function(responseText) {
            alert("done! " + responseText);
        },
        onFailure: function() {
            alert("failed");
        }
    });

    $('myr').addEvent('change', function(event) {
        event.stop();
        var data = this.name + '=' + this.value;  //s1=<option value>, which is the post data we are sending to the php script
        myRequest.send(data);
    });
});