Question

我正在尝试构建一个前端HTML页面，其中包含用户名和密码，然后使用javascript函数显示响应，具体取决于从服务器收到的答案。在网络开发方面，我是一个超级菜鸟，所以任何人都可以帮我纠正我的代码吗？谢谢

这是我的index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <type="text/javascript"></script>
        <script type="text/javascript" src="jquery.js"></script>
        <link rel="stylesheet" href="styles.css" type="text/css" />
        <title>Login Form</title>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#login").click(function(){
                    username=$("#user_name").val();
                    password=$("#password").val();

                    $.ajax({
                        type    : "POST",
                        url     : "login.php",
                        data    : "username="+username+"&password="+password,
                        success : function(html){
                            if(html=='true'){
                                $("#add_err").html("right username And password");
                                //$("#login_form").fadeOut("normal");
                                //$("#shadow").fadeOut();
                                //$("#profile").html("<a href='logout.php' class='red' id='logout'>Logout</a>");    
                            }else{
                                $("#add_err").html("Wrong username And password");
                            }
                        },
                        beforeSend:function(){
                            $("#add_err").html("Loading...")
                        }
                    });
                    return false;
                });
            });
        </script>
    </head>
    <body>
    <?php session_start(); ?>
        <div id="profile">
            <?php if(isset($_SESSION['user_name'])){ ?>

            <?php } ?>
        </div>
    </body>

    <?php if(empty($_SESSION['user_name'])){ ?>
    <div class="container" id="login_form">
        <section id="content">
            <form action="login.php">
                <h1>Login Form</h1>
                <div>
                    <input type="text" placeholder="Username" required="" id="user_name"  name="user_name"/>
                </div>
                <div>
                    <input type="password" placeholder="Password" required="" id="password"  name="password"/>
                </div>
                <div class="err" id="add_err"></div>
                <div>
                    <input type="submit" value="Log in" id="login"  />
                </div>
            </form>
            <div class="button"> </div> 
        </section>
    </div>
    <?php } ?>

</html>

这是我的login.php代码，它使用curl转发用户名/传递给相应的网址

<?php

session_start();
$url =  http://    //url that recieves username/password and responds if credentials are correct after contacting database
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($_POST));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec($ch);
curl_close($ch);
return $result;

?>

Answer 1

的javascript

$("#login").click(function(){
  $.ajax({
    type: 'POST', 
    url: 'login.php', 
    dataType: 'json',
    data: $('#Form').serialize(),
    success: function (x) {                
      $("#add_err").html(x.response);
    },
    beforeSend:function(){
      $("#add_err").html("Loading...")
    }
  });
  return false;
});

html表单

   <form id="Form" action="login.php">
        <h1>Login Form</h1>
        <div>
            <input type="text" placeholder="Username" required="" id="user_name"  name="user_name"/>
        </div>
        <div>
            <input type="password" placeholder="Password" required="" id="password"  name="password"/>
        </div>
            <div class="err" id="add_err"></div>
        <div>
                <input type="submit" value="Log in" id="login"  />
        </div>
    </form>

PHP

<?php
session_start();
header('Content-Type: application/json');
$url =  http://    //url that recieves username/password and responds if     credentials are correct after contacting database
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($_POST));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$result = curl_exec($ch);
curl_close($ch);
$output=array(); 
$output['response']=$result;    
echo json_encode($output);
?>

Answer 2

好的，首先要做的事情是：您可以使用action="form.php"或点击处理程序$("#login").click(function(){});。使用两者都是多余的，会使你的javascript格式检查器无效。

然后继续删除action="login.php"。

下一步是确保您的login.php脚本正确接收所有内容。出于调试目的，添加

var_dump($_POST);
exit();

在login.php的顶部，然后添加

console.debug(html);

到你的ajax success函数的顶部。这将在控制台中向您显示PHP脚本对$_POST变量的看法。

希望这可以帮助您开始诊断正在发生的任何问题。

使用AJAX提交登录表单并获得响应

2 个答案: