Question

Howdie do，

我有一个只需要用户输入用户名和电子邮件的表单。输入通过客户端和服务器端进行了清理。

脚本正在发送POST而没有任何问题，它正在返回数据，就像我在日志中检查一样。但是，由于某种原因，数据未在浏览器中显示。

代码在下面，我觉得这是一个我忽略的愚蠢项目，但我无法在任何地方找到它

<!DOCTYPE HTML>
<HEAD>
<TITLE>Jeremy's Form Submit Test </TITLE>

<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
<script>
$(document).ready(function()
{
        $("#FormSubmit").click(function() //Set click action on formsubmit button
        {
                var submit = true;
                $('#MainForm input[type="text"]').each(function() //Loop through input fields to ensure data is present
                {
                    if($.trim($('#User').val()) == '') //Remove whitespaces and check if field is empty
                    {
                        alert('Input can not be blank');
                        submit = false;
                    }

                    var regex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/; //RegEx to test email against
                    if(!regex.test($.trim($('#Email').val()))) //If supplied email without whitespaces doesn't match pattern, then alert user
                    {
                        alert('Please provide a valid email');
                        submit = false;
                    }
                });
                if(submit == true) //If data is present, then prepare email and user values to be submitted to .php page
                {
                    data = {'user_name': $('#User').val(), 'email': $('#Email').val()}; //Add username and email to array
                    $.post("success.php", data, function(ReturnedData) //post data via ajx to success.php and retrieve response
                    {
                        console.log(JSON.stringify(ReturnedData));
                        if(ReturnedData.Type == 'Error') //If error returned, display error message
                        {
                            var results = '<h1>'+ReturnedData.Message+'</h1>';
                        }
                        else if(ReturnedData.Type == 'Success') //If success returned, display message and remove submit button
                        {
                            var results = '<h1>'+ReturnedData.Message+'</h1>';
                            $('#FormSubmit').remove();
                        }
                        $('div#DataHolder').html(results);
                    }, 'json');
                }
        });

});
</script>

</HEAD>

<BODY>

<form id="MainForm">
*UserName: <input type="text" id="User" name="FormUsername" required /> 
*Email: <input type="email" id="Email" name="FormEmail" required />
<input type="submit" id="FormSubmit" value="Submit">
</form>

<div id="DataHolder"></div>


</BODY>
</HTML>

下面的PHP文件返回一个json_encoded响应，我已经通过控制台日志确认数据正在正确返回，但是它没有显示在我设置的div中。日志文件显示正确的响应，但它没有显示：

{“Type”：“Error”，“Message”：“UserName必须至少为3个字符!!!”}

<?php

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') //Check apache header to ensure its a json request
{
    $ReturnedData = json_encode(array("Type" => "Error", "Message" => "Naughty naughty. This wasn't an ajax request"));
    die($ReturnedData);
}

if(isset($_POST)) //Ensure that POST is set
{
    //Santiaze the post variables to be double sure no one is up to any funky business
    $SaniUser = filter_var($_POST['user_name'],FILTER_SANITIZE_STRING);
    $SaniEmail = filter_var($_POST['email'],FILTER_SANITIZE_EMAIL);

    //Check that username is at least 3 characters and return error if it's not
    if(strlen($SaniUser) != 3)
    {
        $ReturnedData = json_encode(array("Type" => "Error", "Message" => "UserName must be at least 3 characters!!!"));
        die($ReturnedData);
    }
    //Check that email is a valid email
    if(!filter_var($SaniEmail,FILTER_VALIDATE_EMAIL))
    {
        $ReturnedData = json_encode(array("Type" => "Error", "Message" => "Please supply a valid email address!!!"));
        die($ReturnedData);
    }
    //All variables are good. Return successfully message
    $ReturnedData = json_encode(array("Type" => "Success", "Message" => "SUCCESS!!!" .$SaniUser. "Has successfully submitted the form"));
    die($ReturnedData);
}
else
{
    $ReturnedData = json_encode(array("Type" => "Error", "Message" => "Naughty naughty. No data was submitted!!!"));
    die($ReturnedData);
}

?>

Answer 1

WOWOWOW这个问题让我一直盯着我。

当数据存在时，我最初没有初始化var结果。因此，当我调用.html（结果）时，结果变量范围仅在if / else语句中。

将变量设置在if语句的顶部，然后将returnedData设置为该值

更新后的代码如下：

if(submit == true) //If data is present, then prepare email and user values to be submitted to .php page
                {
                    var results;
                    data = {'user_name': $('#User').val(), 'email': $('#Email').val()}; //Add username and email to array
                    $.post("success.php", data, function(ReturnedData) //post data via ajx to success.php and retrieve response
                    {
                        console.log(JSON.stringify(ReturnedData));
                        if(ReturnedData.Type == 'Error') //If error returned, display error message
                        {
                            results = '<h1>'+ReturnedData.Message+'</h1>';
                            //alert(ReturnedData.Message);
                        }
                        else if(ReturnedData.Type == 'Success') //If success returned, display message and remove submit button
                        {
                            $('#FormSubmit').hide();
                            results = '<h1>'+ReturnedData.Message+'</h1>';


                        }
                        $('#DataHolder').html(results);

                    }, 'json');
                }

JQuery不显示来自ajax响应的HTML数据

1 个答案: