ajax加载的php无法正常工作

时间:2013-12-11 22:12:33

标签: javascript php jquery html ajax

现在好了,下面是我的代码,当某个机构输入用户名和密码并单击“提交”按钮时,会触发Javascript和ajax

    <html>
    <head>
        <title>Untitled Document</title>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script>
            $(function () {
            $('form').on('submit', function (e) {
            $.ajax({
            type: 'post',
            url: 'redirect.php',
            data: $('form').serialize(),
            success: function () {
            alert('form was submitted');     
            }
            });
            e.preventDefault();
            });
            });

        </script>
    </head>
    <body>
        <form>
            <div class="add_list">
                <p><span>Select User Name : </span>
                    <input type="text" name="username" size="20" />
                </p>
                <p><span>Select Your Password : </span>
                    <input type="password" name="password" size="20" />
                </p>
            </div>
            <div class="add_user">
                <input type="submit" value="add user" />
            </div>
        </form>
    </body>
</html>

触发后,它会加载此页面,即redirect.php页面

 <?php
include 'includes\config.php';
//connects to the database


if (!empty($_POST['username']) && !empty($_POST['password'])) {
    // Now checking user name and password is entered or not.

    $username = mysql_real_escape_string($_POST['username']);

    $password = mysql_real_escape_string($_POST['password']);

    $check    = "SELECT * from user where username= '" . $username . "'";
    $qry      = mysql_query($check);
    $num_rows = mysql_num_rows($qry);

    if ($num_rows > 0) {
        // Here we are checking if username is already exist or not.

        echo "The username you have entered already exist. Please try again with another  username.";
        echo ('<script type="text/javascript"> alert ("The username you have entered already    exist.            Please try again with another username.");</script>');
        exit;
    }

    // Now inserting record in database.
    $query = "INSERT INTO user VALUES ('','" . $username . "','" . $password . "')";
    //id,username and password
    mysql_query($query);
    echo "User Added Successfully";
    echo ('<script type="text/javascript"> alert ("The username is added successfully.");</script>');
    exit;
}
?>

现在的问题是,当我提交表单时,它提醒表单已提交,但是redirect.php中的实际javascript没有加载那个没有提醒,而且php的回显也没有工作,虽然它已经提交在数据库和另一个问题是,如果该用户名已经存在,当一个人进入表格提交是警报,然后什么也没有,当我检查它没有提交因为用户名已经存在但没有回声或javascript的警报正在工作。 / p>

4 个答案:

答案 0 :(得分:2)

我建议像:

在redirect.php页面上:

if($num_rows > 0){
     echo ("fail");
}
else {
     //your insert code
     echo ("success")
}

你的ajax成功应该是

success: function(data) {
    switch(data) {
         case 'fail':
              //fail code here
              alert ('That user already exists');
              //or simply alert (data);
              break;
         case 'success':
              //Success code here
              alert (data);
              break;
         default:
              //Error - invalid response from redirect
    }
}

答案 1 :(得分:1)

看起来你错了。 redirect.php页面不是向用户显示用户名存在或不存在的页面。 redirect.php页面将消息(或结果)发送回ajax函数。 ajax函数作用于该消息。可以通过在变量函数中放置一个变量来访问该消息,如:success:function(var)然后测试并对变量的内容进行操作。

为了演示它的工作原理并避免混淆,我建议你制作一个test_ajax.php页面。 test_ajax.php页面的全部内容是:

 <?php
 echo('These are the ajax results');
 ?>

并将网址和成功功能更改为

<script>
    $(function () {
        $('form').on('submit', function (e) {
        $.ajax({
        type: 'post',
        url: 'test_ajax.php',
        data: $('form').serialize(),
        success: function(var) {
        alert (var);
        }
        });
        e.preventDefault();
        });
    });
</script>

现在提交时,它会提醒“这些是ajax结果”。 一旦你看到它是如何工作的,你可以回到你的redirect.php页面,并在其他答案中提到的响应中使用ajax。

答案 2 :(得分:0)

你实际上有一些问题,但不会全部讨论。

首先 - 这只是一个建议,而不是编码错误 - 您应该使用mysqlliPDO进行数据库查询。您不再支持您正在使用的mysql_功能。

另外,(再次,只是建议)你有这一行:

"SELECT * from user where username= '" . $username . "'"

返回所有列只是为了计数是没有意义的。只需使用SELECT username FROM user...SELECT COUNT(username) FROM user...即可。如果您拥有许多列和数百万用户,这是一种很好的做法。如果您需要检查一列,则选择一列,不要全部返回。

在您的PHP页面上,您可以简单地回应以下成功响应:

echo "Added";
// and //
echo "Exists";

您无需使用警报回显SCRIPT。你可以做这个客户端。

您的AJAX请求可以拥有此响应的监听器:

$.ajax({
    type: 'post',
    url: 'redirect.php',
    data: $('form').serialize(),
    dateType: "html",
    success: function(data) {
        if (data == "Added") {
            alert("User added.");
        } elseif (data == "Exists") {
            alert("Username already exists!");
        } else {
            alert("User submission failed.");
        }  
    }, error: function() {
       alert("An error occurred.");
    }
});

例如,交换这段代码:

if ($num_rows > 0) {
    echo "The username you have entered already exist. Please try again with another  username.";
    echo ('<script type="text/javascript"> alert ("The username you have entered already    exist. Please try again with another username.");</script>');
    exit;
}

有了这个:

if ($num_rows > 0) {
    echo "Exists";
    exit;
}

并使用我描述的上述AJAX方法。

答案 3 :(得分:0)

您正在收到结果,但您正在以错误的方式使用ajax。

如果您想在结果中使用html,那么成功已经为您提供了结果。

显示响应来自response.php的HTML / JS应该是这样的:

<html>
  <head>
        <title>Untitled Document</title>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script>
          $(function () {
            $('form').on('submit', function (e) {
              $.ajax({
                type: 'post',
                url: 'redirect.php',
                data: $('form').serialize(),
                success: function (data) {
                  $('.result').html(data);
                }
              });
              $('.result').html('form was submitted');
              e.preventDefault();
            });
          });
        </script>
  </head>
  <body>
    <form>
      <div class="add_list">
        <p>
          <span>Select User Name : </span>
          <input type="text" name="username" size="20" />
        </p>
        <p>
          <span>Select Your Password : </span>
          <input type="password" name="password" size="20" />
        </p>
      </div>
      <div class="add_user">
      <input type="submit" value="add user" />
      </div>
      <div class="result">
      </div>
    </form>
  </body>
</html>