javascript - 如果从 php 返回错误则停止刷新

Question

我想知道是否可以向我的 javascript 添加一些东西，如果表单提交正常，则允许刷新，但如果从 PHP 返回错误，则不会刷新页面。

这可能吗？如果可以的话，谁能给我提供任何帮助我实现这一目标的指导。当提交表单并返回一条消息时，我设法让 javascript 刷新。

这是js:

function addCall() {
  var data = $('#addForm').serialize();
  $.post('../Admin/ManageCourses_AddSubmit.php', data, function(response){

    $("#addForm").html(response);
    //'soft'reload parent page, after a delay to show message
    setTimeout(function(){
      $('#addModal').modal('hide')
      location.reload();
    },3500);

  }).fail(function(jqXHR, textStatus) {
    alert( "Request failed: " + textStatus );
  });
}

以及处理表单并验证它的 php:

<?php

session_start();

if (empty($_POST['course_title'])) {
   $message = " Value is required";
} 

else {

    $course_title           = trim($_POST['course_title']);

    # Validate Course #

    if (!ctype_alpha($course_title)) {

        $message = '<p class="error">Course title should be alpha characters only.</p>';
    }

    elseif (strlen($course_title) < 3 OR strlen($course_title) > 50) {
        $message = '<p class="error">Course title should be within 3-50 characters long.</p>';
    }

    else {

        include "../includes/db_conx.php";

        try
        {
            $db_conx = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password);
            $db_conx->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

            $sql = $db_conx->prepare("INSERT INTO `insights`.`course_details` (`course_title`) VALUES (:course_title)");
            $sql->bindParam(':course_title', $course_title, PDO::PARAM_STR);
            $sql->execute();

            $message = "<p class='text-success'> Record Successfully Added <span class='glyphicon glyphicon-ok'/></p>";
        } 
        catch(Exception $e) {

            if( $e->getCode() == 23000)
            {
                $message = 'Course already exists in database';
            }
            else 
            {
                $message = $e->getMessage();
            }
        }
    }
}
die($message);
?>

如果能够对表单进行修改而不是重新全部重写，这对用户来说真的很有用。

形式:

                <div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="addModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <h4 class="modal-title">Add New Record: </h4>
                            </div>
                            <div class="modal-body">
                                <form id="addForm" class="addForm">
                                    <div class="form-group">

                                        <label class="control-label" for="forename">Forename:</label>
                                        <div class="controls">
                                            <input id="forename" name="forename" type="text" placeholder="Enter forename(s)" class="form-control" maxlength="100" required="">

                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label" for="surname">Surname:</label>
                                        <div class="controls">
                                            <input id="surname" name="surname" type="text" placeholder="Enter surname" class="form-control" maxlength="100" required="">

                                        </div>
                                    </div>

                                    <!-- Text input-->
                                    <div class="form-group">
                                        <label class="control-label" for="email">Email:</label>
                                        <div class="controls">
                                            <input id="email" name="email" type="email" placeholder="Enter a valid email" class="form-control" maxlength="255" value="" required="">

                                        </div>
                                    </div>


                                    <div class="form-group">

                                        <label class="control-label" for="username">Username:</label>
                                        <div class="controls">
                                            <input id="username" name="username" type="text" placeholder="username" class="form-control" value="" maxlength="50" required="">

                                        </div>

                                    </div>
                                    <div class="form-group">

                                        <label class="control-label" for="password">Password:</label>
                                        <div class="controls">
                                            <input id="password" name="password" type="password" placeholder="password" class="form-control" maxlength="40" required="">

                                        </div>

                                    </div>

                                    <div class="form-group">

                                        <label class="control-label" for="confirm_password">Confirm Password:</label>
                                        <div class="controls">
                                            <input id="confirm_password" name="confirm_password" type="password" placeholder="retype password" class="form-control" maxlength="40" required="">

                                        </div>

                                    </div>

                                    <?php

                                    include "../includes/db_conx.php";

                                    try {

                                        $db_conx = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password);

                                        $db_conx->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
                                        $stmt2 = $db_conx->prepare('SELECT * FROM role_type');
                                        $stmt2->execute();
                                        $roles = $stmt2->fetchAll(PDO::FETCH_ASSOC);
                                    }

                                    catch(Exception $e)
                                    {
                                        die ("Could not connect to the database $mysql_dbname :" . $e->getMessage());
                                    }
                                    ?>

                                    <div class="control-group">
                                        <label class="control-label" for="role_type">Select User Type:</label><p></p>
                                        <select name="role">
                                            <option value=''>Select One</option>";
                                            <?php foreach($roles as $role): ?>
                                            <option value="<?php echo $role['role_type_code'] ?>"><?php echo $role['role_title'] ?></option>
                                        <?php endforeach ?>
                                    </select>
                                </div>
                                <p></p>

                                <?php

                                    include "../includes/db_conx.php";

                                    try {

                                        $db_conx = new PDO("mysql:host=$mysql_hostname;dbname=$mysql_dbname", $mysql_username, $mysql_password);

                                        $db_conx->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
                                        $stmt3 = $db_conx->prepare('SELECT * FROM course_details ORDER BY course_title');
                                        $stmt3->execute();
                                        $courses = $stmt3->fetchAll(PDO::FETCH_ASSOC);
                                    }

                                    catch(Exception $e)
                                    {
                                        die ("Could not connect to the database $mysql_dbname :" . $e->getMessage());
                                    }
                                    ?>

                                    <div class="control-group">
                                        <label class="control-label" for="course_details">Select Course:</label><p></p>
                                        <select name="course">
                                            <option value=''>Select One</option>";
                                            <?php foreach($courses as $course): ?>
                                            <option value="<?php echo $course['course_code'] ?>"><?php echo $course['course_title'] ?></option>
                                        <?php endforeach ?>
                                    </select>
                                </div>
                                <input type="hidden" name="form_token" value="<?php echo $form_token; ?>" />
                            </form>
                            </div>
                            <div class="modal-footer">
                                <div class="btn-toolbar">
                                    <button type="button" class="btn btn-default" class="pull-right" data-dismiss="modal">Close</button>

                                    <button type="button" class="btn btn-success" class="pull-right" onclick="addUCall();">Submit <span class="glyphicon glyphicon-saved"></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

提前谢谢你。

Answer 1

您的消息变量包含错误消息和成功消息。它会在每次收到响应时重新加载页面。
在 $("#addForm").html(response) 之后添加这个； -

var n = response.search("class=\'text-success\'");
if(n!=-1){
      //reload success
}
else{
     //stay on page, errors
}