使用JQuery/AJAX发送HTML表单数据作为JSON到PHP使用JQuery/AJAX

当我点击我的登录按钮时，它只是因为某种原因重新加载页面。它应该提醒从我的PHP页面回声的字符串。使用JQuery/AJAX发送HTML表单数据作为JSON到PHP使用JQuery/AJAX

这是我的login.js代码：

$(document).ready(function(){ 
    $('#login').click(function(){ 


     $('#msgLoginStatus').show(); 
     $('#msgLoginStatus').html("processing..."); 

     $.post('login.php',{username:"bob",password:"pass"}, function(data){ 
      alert(data); 
     }); 
    }); 

});

我的login.php：

<?php 
    echo "message"; 
?>

和我的形式：

  <form id="loginForm" action="" method="post"> 
      <fieldset id="body"> 
         <fieldset> 
          <label for="username">Username</label> 
          <input type="text" name="username" id="username" /> 
         </fieldset> 
         <fieldset> 
          <label for="password">Password</label> 
          <input type="password" name="password" id="password" /> 
         </fieldset> 
         <button id="login">login</button> 
         <label for="checkbox"><input type="checkbox" id="checkbox"  />Remember me</label> 
         <br /> 
         <p id="msgLoginStatus" style="display:none"></p> 
        </fieldset> 
        <span><a href="#">Forgot your password?</a></span> 
       </form>

有在浏览器控制台没有错误。我试过这也使用$ .ajax，它返回一个错误，我试图把错误变量放入一个警报，但是当它提醒时，它是一个空字符串。任何人有一个想法什么是错的？

来源

2011-08-07 FinalFortune

您的登录按钮有一个模糊的行动 - 增加type="submit"这样的：

<button id="login" type="submit">Login</button>

现在，如果你真的想执行JavaScript的明确的POST，调用e.preventDefault所以浏览器的自动“提交”行动将被抑制。

e.preventDefault(); 
$.post(...);

但是，让表单提交自己可能会更好。要做到这一点指定表格的正确action="login.php"属性：

<form id="loginForm" action="/login.php" method="post">

请登录按钮现有的“点击”的处理程序，只是删除了“.post的$”的一部分，让浏览器处理过帐。你仍然会得到很好的“处理...”文本。

更妙的是，处理的形式，而不是按钮上的“click”事件“提交”事件：

$('#loginForm').submit(function(e) { 
    $('#msgLoginStatus').show(); 
    $('#msgLoginStatus').html("processing..."); 
});

这样，用户无论使用提交表单，你会得到漂亮的更新按钮或按下键盘上的“输入”。

来源

2011-08-07 20:09:12 orip

尝试：

$('#login').click(function(e){ 
    e.preventDefault(); 
    $('#msgLoginStatus').show(); 
    $('#msgLoginStatus').html("processing..."); 

    $.post('login.php',{username:"bob",password:"pass"}, function(data){ 
     alert(data); 
    }); 
});

阻止“正常”的发生提交（我拿这，就是为什么你没有得到任何错误）。

见http://api.jquery.com/event.preventDefault/

来源

2011-08-07 20:00:55 karim79

哇，我简直不敢相信这是它，一直在盯着这个相当长的一段时间了。感谢您的迅速回答。 – FinalFortune

@FinalFortune - 奥普的答案是优越的，我会建议应用他所建议的一切（尤其是关于绑定到表单的onsubmit方法的部分），当然，接受他的答案。 – karim79

（在处理程序和抢事件对象作为e）添加e.preventDefault();到CLCK处理程序。

来源

2011-08-07 20:01:34

或者你可以只设置按钮类型='按钮'，而不是提交。这也将运行代码

<button id="login" type="button">Login</button>

这样您不必停止浏览器的事件

来源

2012-09-12 06:07:47 Gurria

使用JQuery/AJAX发送HTML表单数据作为JSON到PHP使用JQuery/AJAX

回答

相关问题