使用ajax在悬停时调用php变量

时间:2014-02-04 17:47:24

标签: javascript php jquery ajax mouseover

我在PHP中有一个变量$form,并希望每当我悬停按钮时都可以调用或显示它。 我是ajax的新手,不知道如何在悬停按钮时调用变量。 代码是:

的Javascript

<script type="text/javascript">
    $(document).ready(function() {
        $("#login_button").hover(function() {
            $("login-form").slideDown(400);
        });
        $("#login_button").hover(function() {
            $("login-form").css('visibility','visible'); 
        });
        $("#login_button").dblclick(function() {
            $("login-form").slideUp(1200);
        });
        $("#login-form").mouseleave(function() {
            $("login-form").slideUp(1000);
        });
    });
</script> 

PHP

<?php
$form = "<form action='?' method='post' id='login-form' name='login-form'><!-- class='form-horizontal well' -->
         <strong><legend>Login</legend></strong>
         <fieldset id='inputs'> 
             <input type='text' placeholder='Username' name='name' class='input-large' id='username'>
             <input type='password' placeholder='Password' name='password' class='input-large' id='password'>
         </fieldset>    
         <fieldset id='actions'>    
             <input type='submit' id='submit' class='btn btn-primary' value='Sign in'>
             <div class='forgot'>  
                 <strong><a href='?forget=1' id='forget'>Forgot Password?</a></strong>
             </div>
         </fieldset>
         ";
?>

3 个答案:

答案 0 :(得分:3)

您可以使用jquery post获取值并将其发送到您的网址:

  $("#yourID").hover(function(){
      $("fomr").css({visible:visible});
      var url = "your-url-here";
      var username = $("#input-for-username").val();
      var password = $("#input-password").val();

      //init ajax post
      $.post(url,{username:username,password:password}.function(data){
        //any thing here
      });
    });

答案 1 :(得分:1)

不需要AJAX;

$(document).ready(function() {
   var php_var = '<?php echo json_encode($form); ?>';          
});

使用它像:

$('#element').hover(function() {
  $('#form_container').html(php_var);
}, function() {
  $('#form_container').html('');
});

答案 2 :(得分:1)

php是服务器端,javascript(如html)是客户端。

您需要做的是在隐藏容器中显示页面中$form的内容,然后使用触发器显示它:

<div id="login-form" style="display:none"><?php echo $form; ?></div>

对于js部分,我简化了你的例子:

$("#login_button").hover(function(e) {
  $("#login-form").slideDown(400);
},
function(e) {
  $("#login-form").slideUp(1200);
});

jquery.hover doc

请注意当前版本的jquery使用以下语法:

$(document).on("hover", "#login_button", function(e){
  // your commands here
});