基于php形式的条件ajax结果显示div

时间:2017-06-23 15:15:01

标签: javascript php ajax

我有PHP形式`看起来像这样

<form>
    <div id="inid">
        National ID: <input type="text" id="individual_nid" oninput="getIndividualName(this.value)" />
    </div>
    <hr />
    name: <div id="individual_name_fetch"></div>
    <hr />
    <div id="other_inputs fields" style="display: none;">
        more inputs fields...
    </div>
</form>

在我的PHP表单中,我有一个输入textbox,其中用户插入一个数字

<input id="individual_nid" oninput="getIndividualName(this.value)" />

textbox即时启动 以下ajax功能

function getIndividualName(val)
{
    $.ajax({
        type: "POST",
        url:"get_individual_name.php",
        data: 'individual_nid='+val,
        success: function(data){

            $("#individual_name_fetch").html(data);

        }
    });
}

在此函数中,我将用户的输入传递给get_individual_name.php页面。

get_individual_name.php页面中,我有一个PHP脚本,用于在数据库中搜索插入的数字并获取相应的个人名称并将其提取到id="individual_name_fetch" div。

PHP页面中的get_individual_name.php脚本如下所示:

$q = mysqli_query($link, "SELECT * FROM table WHERE national_id = '".$_POST['individual_nid']."' ");
if(mysqli_num_rows($q) == 1)
{
    while($r = mysqli_fetch_assoc($q))
    {
        echo $individual_name = $r['individual_name'];
    }
}
else
{
    echo $individual_name = 'Not in db';
}

到这里一切都很好

我现在需要做什么......

如果搜索到的用户在数据库(mysqli_num_rows($q) == 1)中建立,那么我想在表单中显示其他输入div id="other_inputs fields"。如果没有,那么other_inputs fields div再次隐藏

我该如何做到这一点?

请注意,ajax功能和PHP脚本即时运行

注意&amp;更新 脚本的输出将是HTML代码,例如

  1. 如果结果发现输出将是:
  2. <span style="color: green;"><i class="fa fa-check fa-fw fa-lg"></i> <?=$individual_name;?></span>

    OR

    1. 如果未找到结果:
    2. <span style="color: red;"><i class="fa fa-times fa-fw fa-lg"></i> No user found.</span>

      我正在考虑的

      是指定一个变量,例如$show_extra_fields = true$show_extra_fields = false并将其传递回ajax函数,然后从那里检查$ show_extra_fields变量的值,并根据我显示/隐藏其他字段div的值。

      这可能吗?

3 个答案:

答案 0 :(得分:2)

要执行您要求的操作,您需要在AJAX回调中添加show和hide函数:

function getIndividualName(val)
{
    $.ajax({
        type: "POST",
        url:"get_individual_name.php",
        data: 'individual_nid='+val,
        dataType: 'json',
        success: function(data){

            $("#individual_name_fetch").html(data);
            if(data[0] != 'Not in db') {
               $('#other_inputs').show();
            } else {
               $('#other_inputs').hide();
            }
        }
    });
}

请记住ID's Must Be Unique,特别是因为当您尝试与这些元素进行交互时,它会在JavaScript和CSS中导致问题。 ID不得包含空格。

编辑:使用PHP返回JSON(注意: Little Bobby your script is at risk for SQL Injection Attacks. 了解{{3} prepared的语句。即使MySQLi也不安全!)

$q = mysqli_query($link, "SELECT * FROM table WHERE national_id = '".$_POST['individual_nid']."' ");
$json = array();
if(mysqli_num_rows($q) == 1)
{
    while($r = mysqli_fetch_assoc($q))
    {
        $json[] = $r['individual_name'];
    }
}
else
{
    $json[] = 'Not in db';
}

echo json_encode($json);

答案 1 :(得分:0)

您可以使用JavaScript执行此操作。检查AJAX响应,然后根据此响应采取措施。

注意: 请勿在html的ID中使用空格

 success: function(data){

        $("#individual_name_fetch").html(data);
        if (data === 'Not in db') {
            document.getElementById('other_inputs_fields').style.display = 'none';
        } else {
            document.getElementById('other_inputs_fields').style.display = 'block';
        }

    }

答案 2 :(得分:0)

快速修复:如果没有数据,请不要生成任何输出。只需检查空字符串作为响应。

    success: function(data) {
        if (data === "") {
            $('#other_inputs_fields').hide();
            $("#individual_name_fetch").html('No data available');
        } else {
            $('#other_inputs_fields').show();
            $("#individual_name_fetch").html(data);
        }
    }

长期解决方案:对于学生的作业或爱好项目,此代码仍然可以正常使用。但在所有其他情况下,您最好寻找一些WEB框架,例如Symfony https://symfony.com/。框架将帮助您以更加结构化的方式构建应用程序,提供我们的最佳实践,包括评论中指出的安全问题。