收到请求失败错误JavaScript

Question

我的javascript函数遇到问题。它返回一个请求失败的服务器故障但是仍然调用php文件并在数据库中插入记录并刷新页面以显示添加的记录。不知道为什么会遇到这个问题。谁能帮我理解我做错了什么？

这是jQuery：

function addPropCall() {
  var data = $('#addProposal').serialize();
  $.post('../Supervisor/Proposal_AddSubmit.php', data, function(response){

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

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

这是序列化的表单：

<div id="addPModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="addPModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">Add New Proposal: </h4>
                        </div>
                        <div class="modal-body">
                            <form id="addProposal" class="addProposal">
                                <div class="form-group">
                                    <label for="code" class="control-label">Proposal ID:</label>
                                    <input type="text" class="form-control" id="proposal_id" name="proposal_id" readonly value ="NULL">
                                </div>
                                <div class="form-group">
                                    <label for="title" class="control-label">Enter Proposal Title:</label>
                                    <textarea type="text" class="form-control input-xlarge" rows="2" id="proposal_title_id" name="proposal_title"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="title" class="control-label">Enter Proposal Description:</label>
                                    <textarea type="text" class="form-control input-xlarge" rows="7" id="desc_id" name="description"></textarea>
                                </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);
                                    $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());
                                }
                                ?>

                                <!-- <button type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#addTModal" data-id="#">Select Tags  <span class="glyphicon glyphicon-tags"/></button> -->

                                <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> </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);
                                $stmt = $db_conx->prepare('SELECT * FROM tag_details ORDER BY tag_title ASC');
                                $stmt->execute();
    //$count = $stmt>rowCount();
                                $tags = $stmt->fetchAll(PDO::FETCH_ASSOC);
                            }
                            catch(Exception $e)
                            {
                                /*** if we are here, something has gone wrong with the database ***/
                                $e->getMessage();
                            }


                            ?>


                            <div class="control-group">
                                <label class="control-label" for="tag_details">Select Tags:</label><p></p>
                                <p class="text-danger"><small>(Select up to 3)</small></p>
                                <div class="checkbox-new">
                                    <?php foreach($tags as $tag): ?>

                                    <input name='tag[]' class="checkbox" type="checkbox" value="<?php echo $tag['tag_code'] ?>"><?php echo $tag['tag_title'] ?></p>

                                <?php endforeach ?>
                            </div>
                        </div>
                            <input type="hidden" name="user_token" value="<?php echo  $_SESSION['user_token'];  ?>"/>

                        <div class="modal-footer">

                            <div class="btn-toolbar">
                                <button type="button" class="btn btn-default" class="pull-right" data-dismiss="modal">Close</button>


                                <button name= "addProp" value = "addProp" type="submit" class="btn btn-success" onclick="addPropCall();">Add Proposal</button>

                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

错误：

我知道php很好，因为当我使用'method =“post”和动作属性直接调用页面时，它很好。

非常感谢任何帮助。感谢

Answer 1

这是因为提交按钮正在提交页面，您需要取消操作。

onclick="addPropCall(); return false;">

---

理想情况下，您将使用jQuery来附加事件，因为这是一种比内联事件更好的做法。

$("[name='addProp']).on("click", addPropCall);

您可以使用event.preventDefault（）

function addPropCall (event) {
    event.preventDefault();
    //...
}