使用AJAX提交登錄表單並獲得回復

Question

我正在嘗試構建一個使用用戶名和密碼的前端HTML頁面，然后使用javascript函數顯示響應，具體取決於從服務器收到的答案。 在Web開發方面，我是一個超級菜鳥，所以有人可以幫助我更正我的代碼嗎？ 謝謝

這是我的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將用戶名/密碼轉發給適當的URL

<?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函數的頂部。 這將在控制台中顯示$_POST變量的PHP腳本。

希望這可以幫助您開始診斷正在發生的任何問題。

使用AJAX提交登錄表單並獲得回復

問題描述

2 個解決方案

解決方案1
1 2015-02-19 16:51:46

解決方案2
0 2015-02-19 16:40:48

使用AJAX提交登錄表單並獲得回復

問題描述

2 個解決方案

解決方案1 1 2015-02-19 16:51:46

解決方案2 0 2015-02-19 16:40:48

解決方案1
1 2015-02-19 16:51:46

解決方案2
0 2015-02-19 16:40:48