Ajax 不发送数据答案

【问题标题】：Ajax doesn't send dataAjax 不发送数据
【发布时间】：2014-05-28 19:52:05
【问题描述】：

我正在学习使用ajax。通过单击表单中的提交按钮，不会发送数据。

jQuery 代码：

 $('input[name="login"]').click(function()  {
    var username = $('#username').val();
    var password = $('#password').val();
    $.ajax({
        type: 'POST',
        url: '/?module=login&special_content=true',
        data:{'username':username,'password':password, 'action':'login'},
        success: function(e) {
            if(e == false)
            {
            }
            else
            {
                document.location.href = e;
            }
        }
    });
});

HTML 代码：

<section style="width: 400px; margin: 10% auto; float: none;" id="box">
<section id="box-header">
    <div id="box-title">%header_login%</div>
</section>
<section id="box-content" style="float: none;">
    <form method="POST" action="./">
        %login_username%<br>
        <input type="text" style="width: 100%;" class="input" name="username" placeholder="%login_input_user%" required/><br>
        %login_password%<br>
        <input type="password" style="width: 100%;" class="input" name="password" placeholder="%login_input_pass%" required/><br>
        <input type="button" id="login-button" style="width: 100%; box-sizing: border-box;" class="btn btn-red" name="login" value="%login_button%" />
    </form>
    <center><div style="margin-top: 5px;"> %login_or% <a href="?module=register">%login_signup%</a></div></center>
</section>

错误在哪里？谢谢！

【问题讨论】：

这里没有足够的信息。你在调试方面走了多远？
你检查的怎么样了？您可以使用浏览器的网络选项卡查看发出的请求和返回的响应。你也可以用它看看你的JS代码有没有错误
$('#username') 和 $('#password') 未定义，您忘记了 ID。
服务器端代码是什么样的？
如果用户按下“回车”而不是点击提交，您的 ajax 将被跳过，仅供参考。（许多用户都会这样做。）要么删除表单标签，要么将提交按钮更改为 type="submit" 并监听表单的提交事件而不是提交按钮的点击事件。

标签： ajax javascript jquery ajax jquery-selectors

【解决方案1】：

您的问题是由您的选择器引起的。 $("#username") 表示您想要一个将id 设置为“用户名”的元素。

对于您的两个文本输入，将 name="username" 和 name="password" 分别更改为 id="username" 和 id="password"。

【讨论】：

【解决方案2】：

在您的代码中，#username 和 #password 不存在，因此 .val() 返回空/null。

将选择器更改为input[name= 将解决问题

$('input[name="login"]').click(function()  {
    var username = $('input[name=username]').val();
    var password = $('input[name=password]').val();
    $.ajax({
        type: 'POST',
        url: '/?module=login&special_content=true',
        data:{'username':username,'password':password, 'action':'login'},
        success: function(e) {
            if(e == false)
            {
            }
            else
            {
                document.location.href = e;
            }
        }
    });
});

http://jsfiddle.net/dgjBh/

使用图中所示的 devtools 工具检查发布请求

【讨论】：

谢谢，但仍然没有发送数据
我添加了一个显示正在推送/ajaxed 的数据的截图。