AJAX无法发送password类型输入值，改为text类型则正常如何解决？

问题根因 #

• 获取输入框数值的时机错误：你在页面初始加载时就执行了用户名、密码的取值逻辑，此时用户还未在输入框中填写内容，AJAX发送的username和password永远是空值，和输入框的type属性没有关联。你修改为text类型时测试正常属于偶发情况，不是输入框类型导致的问题。

修复方案 #

1. 修改前端JS逻辑 #

将取值代码移动到点击提交按钮的回调函数内部，每次提交时读取最新的输入内容：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
        <input type="text" id="username">
        <input type="password" id="password">
        <input type="submit" id="subit" value="send">
        <div id="par"></div>
        <script>
            $(document).ready(function(){
              $("#subit").click(function(){
                // 把取值逻辑移到此处，每次点击提交时读取最新输入值
                var user = $("#username").val();
                var pass = $('#password').val();
                $.ajax({
                  type:"post",
                  url: "home.php",
                  data:{subit:1, username: user, password: pass }
                }).done(function(resdata){
                   $("#par").html(resdata);
                });
              });  
            });
       </script>
</body>
</html>

2. 安全优化建议 #

你当前的PHP代码存在严重的SQL注入风险，直接将用户提交的内容拼接进SQL查询语句，会导致数据库数据泄露、篡改等安全问题，建议修改为参数绑定的预处理查询方式，不要直接拼接用户输入内容到SQL语句中。

内容的提问来源于stack exchange，提问作者ahmed mohamed