如何在不刷新页面的情况下显示错误?

Posted

技术标签:

【中文标题】如何在不刷新页面的情况下显示错误?【英文标题】:How do I show an error without refreshing the page? 【发布时间】:2012-11-23 16:47:49 【问题描述】:

我正在创建一个注册表单。 用户输入用户名和密码,然后按提交,使用 POST 提交表单。 html

<link href="Styles/RegisterStyles.css" rel="stylesheet" type="text/css" />
<form id="frmRegister" method="post" action="register.php">
  <h1>Register</h1>
    <table >
      <tr>
        <td ><label class="alignRight"> Username: </label></td>
        <td ><input name="txtUsername" type="text" maxlength="40" /></td>
      </tr>

      <tr>
        <td ><label class="alignRight"> Password: </label></td>
        <td ><input name="txtPassword" type="text" maxlength="40" /></td>
      </tr>

      <tr>
        <td >&nbsp;</td>
        <td ><input name="Submit" class="submitButton" type="submit" /></td>        
      </tr>

    </table>
</form>
</html>

PHP:

$username = $_POST["txtUsername"];
$password = $_POST["txtPassword"];
//Code to connect to database

function doesUsernameExist($username)

    //return true if username exists or false otherwise

现在,在 PHP 中,我运行一个查询来检查用户名是否存在于数据库中。 如果用户名已经存在,如何在不导航到另一个页面并导致“用户名”和“密码”字段重置为空白的情况下通知用户?

有些注册表单有一个非常简洁的 javascript,它会在您每次按下键盘上的键时检查用户名是否存在。关于如何实施的任何想法?使用 JavaScript 从我收集到的信息中连接到数据库是困难的(也是不好的做法)。

【问题讨论】:

你在使用 jQuery 吗?您也可以发布您的 HTML 吗? 我能想到的一种方法是,在您拥有用户名的 3 个字符之后,您会生成所有已使用用户名的列表并将其提供给 JS。从那里开始,让 JS 检查所选用户名是否已经在列表中 使用 AJAX。它基本上是对服务器的“正常”请求,只是不刷新页面。相反,该请求由 Javascript 在后台执行。该请求可以简单地由 PHP 脚本处理。该脚本的响应可以由 Javascript 处理。 AJAX 使用 JQuery 非常简单,尽管有很多 sn-ps 说明如何在没有 JQuery 的情况下使用 AJAX。 很遗憾没有 jQuery。我很快就会发布 HTML。 仅供参考,这最好通过在输入的 onkeypress 或 onblur 事件中调用 AJAX 来完成。 【参考方案1】:

一个很好的选择是使用 jQuery/AJAX。 Look at these examples 并在您的服务器上试用它们。在此示例中,在 FILE1.php 中,请注意它传递了一个空白值。您不想传递空白值,这是您将用户名和密码传递给 FILE2.php 的地方。在您的情况下,该行将如下所示:

data: 'username='+username+'&password='+password,

在 FILE2.php 示例中,您可以像这样检索这些值:

$uname = $_POST['username'];
$pword = $_POST['password'];

然后进行 mysql 查找并返回值:

echo 1;

这会将1 传递给FILE1.php 中的成功函数,并将其存储在名为“data”的变量中。因此,成功函数中的alert(data); 行会提醒第一个。

Here is another good example 进行审核。

方法是创建表单,然后使用 jQuery 检测按钮按下并通过 AJAX 将数据提交到辅助 PHP 文件。上面的例子展示了如何做到这一点。

辅助 PHP 文件会返回一个响应(无论您选择发送什么),该响应会出现在您的 AJAX 调用的 Success: 部分中。

jQuery/AJAX 是 javascript,因此您有两种选择:您可以将其放在 PHP 主文档中的 &lt;script type="text/javascript"&gt;&lt;/script&gt; 标记中,或者您可以将 &lt;?php include "my_javascript_stuff.js"; ?&gt; 放在 PHP 文档的底部。

【讨论】:

指向另一个问题的链接很难回答。 我 100% 不同意。很多时候,我接受了善良的灵魂给出的答案,他们指导我找到我可以使用的优秀例子。如果那是您的反对票,那么您的名字很好,但错过了最后的 L。 恕我直言,这不值得一票否决。我要投赞成票。 @David 谢谢。我认为一些脾气暴躁的人可能会从早上的另一杯咖啡中受益。 @cssyphus 现在是晚上 8 点。还有感谢人身攻击,真是成熟了。【参考方案2】:

我的解决方案是使用 AJAX。

提交表单后,对页面进行 AJAX 调用,该页面将评估已输入表单的数据,并返回有关是否已验证的信息。

在您从该 AJAX 调用中获取一些信息后,确定是否再次提交表单,但这次提交到将数据吸收到数据库中的页面。

这是一种解决方案;作为一个 AJAX 新手,我想说可能有更好的,但它可能对你有用。

【讨论】:

【参考方案3】:

我使用 jQuery 来做这样的事情。

在html中

<input type="text" name="username" onBlur="checkUsername(this)">

在 javascript 中是这样的

function checkUsername(v)
    $.post("phppage.php",
        valToBeChecked:v
    ,function(d)
        if($.trim(d)==true)
            // php page returned true
        else
            // php page returned false
        
    );

请注意,这只是一个示例,我想我的语法是正确的。

【讨论】:

他说他不会用jQuery 是的,在我完成打字之前问题已经改变,我没有注意到。我应该删除答案吗?它仍然是一个有效的解决方案。 好的,但即便如此 - 我还是有点好奇。如果我使用 $.post("phppage.php",它不会刷新页面而只是发布它? 别删答案,没关系 v 是发送值的变量的名称,因此在 PHP 中只需通过 $_POST['v'] 引用发送的数据。 d 是php页面的内容,或者是请求返回的数据。检查用户名后,您的 PHP 页面应回显或返回 true 或 false。【参考方案4】:

这将在没有 jQuery 的情况下对输入的模糊进行 AJAX 检查。

编辑:我想澄清一下,我不建议使用这种方法,并且更喜欢将 jQuery(或其他类似的 JS 框架)用于 AJAX。但是,我知道并不是每个人都可以指定他们使用的技术,所以这里是您的要求的答案! :)

<input id="txtUsername" name="txtUsername" />
<script type="text/javascript">
    window.onload = function() 
        document.getElementById('txtUsername').onblur = function(e) 
            // Get the username entered
            var el = e.target;
            var username = el.value;

            // Create an XHR
            var xhr = null;
            if (window.XMLHttpRequest) 
                xhr = new XMLHttpRequest();
             else 
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            

            // AJAX call to the server
            request.open('GET', '/check_username.php?username=' + username, false);
            xhr.onload = function(e) 
                var json = eval(xhr.responseText);
                if (json.exists) 
                   window.alert('That username exists already.');
                
            
            xhr.send();
        
    
</script>

user_exists.php

$username = isset($_GET['username']) ? $_GET['username'] : '';
$username = mysqli_real_escape_string($username);

$sql = "SELECT COUNT(*) > 0 AS user_found
        FROM users
        WHERE username = '$username'";

$result = mysqli_query($sql);

$exists = false;
if ($row = mysqli_fetch_assoc($result)) 
    $exists = $row['user_found'] ? true : false;


echo json_encode(array('exists' => $exists));

【讨论】:

很好的例子,但我认为需要一些依赖于浏览器的东西? 谢谢!我试试,我只听说过AJAX,还没用过。 好吧,在像 jQuery 这样的框架之外它很复杂。上述内容可能并非对所有浏览器都 100% 有效。 这从两个方面说明了 jQuery 的美。类似结果的代码要少得多,并且不需要考虑跨浏览器的考虑(如饥似渴地)。顺便说一句,干得好,这些天我肯定要查一下才能编写原始 javascript。 @NappingRabbit - 我完全同意你的看法。如果没有 jQuery 或其他类似框架,我永远不会这样做(或建议这样做)。 DOM 操作也是如此。但并不是每个人都可以指定他们使用的技术。

以上是关于如何在不刷新页面的情况下显示错误?的主要内容,如果未能解决你的问题,请参考以下文章

如何在不刷新整个页面的情况下刷新视图中的数据?有角度的

如何在不刷新页面的情况下将数据从 Android 发送到 PHP 并显示

如何在不刷新 php 页面的情况下更新/移动我的 canvasjs 图表

如何在不刷新页面的情况下使用 ajax 保存 acf_form

如何在不重新加载整个页面的情况下刷新 div?

如何在不刷新页面的情况下更新角度数据?