Question

我有一个基本的html表单和一个名为“response”的div，用户输入密码，脚本应检查数据库以找到用户名（工作正常）然后在“响应”中打印用户名在表单下进行进一步处理的div，但我无法让jQuery / Ajax位工作在幕后提交表单和查询到数据库（我对jQuery很新）。

到目前为止，我有这个，有人可以帮忙让它工作吗？

php（checkuser.php）：

$pass = $_POST['password'];
echo $pass;
$con = new mysqli("--IP--", "--USER--", "--PASS--", "--DB--");

    if (mysqli_connect_errno()) {
        echo "A problem has occured, please come back later.";
        exit();
    }

    if ($stmt = $con -> prepare("SELECT `username` FROM --DB-- WHERE `password`=?")) {
        $stmt -> bind_param("s", $pass);
        $stmt -> execute();
        $stmt -> bind_result($user);

        while ($stmt -> fetch()) {
             echo "welcome ".$user;
        }     
        return $user;     
        $stmt -> close();
    }   
    $con -> close();

HTML：

<form id="pass_form" action="post">
    <input id="form_pass" type="text" name="password" placeholder="Password Goes Here"><br><br>
    <input id="form_submit" class="submit_btn" type="submit" value="Submit">
</form>
<div id="response"></div>

jQuery（头脑）：

$(function() {
  $("#form_submit").click(function() {
    $.ajax({
    type: "POST",
    url: "http://--SITE--/--FOLDER--/checkuser.php",
    data: "password=" + $("#form_pass").val(),
    success: function() {
      // Not sure what to do here
      }
    });
  });
});

Answer 1

您需要阻止默认表单行为并在#response div

中显示来自ajax请求的响应

$(function() {
   $("#form_submit").click(function(e) {
       e.preventDefault();
       $.ajax({
           type: "POST",
           url: "http://--SITE--/--FOLDER--/checkuser.php",
           data: "password=" + $("#form_pass").val(),
           success: function(result) {
              $('#response').html(result); 
           }
       });
    });
});

Answer 2

一切都在你不知道该做什么。

 success: function(response) {
    alert(response);
 }

另外，我不确定为什么你的php中有一个return $ user。注释，排除并测试上述代码。

所以响应保持了php回应的内容。你现在可以用它做任何你想做的事情。

Answer 3

我们很少让submit按钮完成它的工作。我们喜欢将它仅用作button，而不仅仅是按钮。因此，由于您可能是新手，请让我向您介绍submit按钮和事件。该按钮用于submit表单：

$(function() {
   $("#pass_form").submit(function(e) {
       e.preventDefault();
       $.ajax({
           type: "POST",
           url: "http://--SITE--/--FOLDER--/checkuser.php",
           data: "password=" + $("#form_pass").val(),
           success: function(result) {
              $('#response').html(result); 
           }
       });
    });
});

因此，我们将submit事件处理程序绑定到form，submit按钮从那里获取它。

Answer 4

$("#form_submit").click(function(){
                $("#response").show();
                $.post( "http://--SITE--/--FOLDER--/checkuser.php", {
                    password: $("#form_pass").val(),
                }).done(function( data ) {
                    $( "#response" ).html( data );
                });
            });

这将返回您的定位页面要输出的任何输出。

你真的不需要表格来完成这个过程

使用jQuery Ajax提交基本表单

4 个答案: