接收POST时，JQuery Ajax无法工作

时间：2017-02-15 14:16:13

标签： php jquery ajax

过去几天我一直在寻找答案，但却找不到答案。在这一点上，我认为问题要么是AJAX的结果，要么是我的实际形式。无论哪种方式，任何帮助将不胜感激。

所以我使用的Ajax之前曾经使用过更简单的形式。出于这个原因，我简单地把它带过来并进行了调整。我改变的唯一事情是它将加载的ID名称和文件。话虽如此，它确实有效 - 在某种程度上。如果正在加载的文件包含文本或基本的echo语句，那么它将正常运行并在页面上按预期打印。

当我开始尝试让它设置变量而不是什么时，它就开始出现问题。它很简单吐出来＃Ajax无法运行＆＃34;。我已经尝试了各种方法来提取错误信息，但那些似乎也没有用。这里和那里可能会有一些小错误，因为我现在已经大大摆弄了一两天的代码。

HTML：

    <!DOCTYPE html>
<?php session_start(); ?>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- Standard Meta -->

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

  <!-- Site Properties -->
  <title>Apollo Project | Conjugate</title>

  <link rel="stylesheet" type="text/css" href="/css/semantic.css">
  <link rel="stylesheet" type="text/css" href="components/dropdown.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="/components/dropdown.js"></script>
  <script src="/scripts/semantic.js"></script>    

  <style type="text/css">
  body {
    background-color: #FFFFFF;
  }
  .ui.menu .item img.logo {
    margin-right: 1.5em;
  }
  .main.container {
    margin-top: 7em;
  }
  </style>

</head>
<body>

  <div class="ui fixed inverted menu">
    <div class="ui container">
      <a href="http://semantic-ui.com/examples/fixed.html#" class="header item">
        Apollo Project
      </a>
      <a href="http://semantic-ui.com/examples/fixed.html#" class="item">Home</a>
      <div class="ui simple dropdown item">
        Dropdown <i class="dropdown icon"></i>
        <div class="menu">
          <a class="item" href="http://semantic-ui.com/examples/fixed.html#">Link Item</a>
          <a class="item" href="http://semantic-ui.com/examples/fixed.html#">Link Item</a>
          <div class="divider"></div>
          <div class="header">Header Item</div>
          <a class="item" href="http://semantic-ui.com/examples/fixed.html#">Link Item</a>
        </div>
      </div>
    </div>
  </div>


  <div class="ui main text container">

     <h3 class="ui center aligned header">Verb Conjugating</h3>
    <div id="form-content">
    <form method="post" action="" id="mainForm" >
      <!-- Selector for Chapter -->
      Chapter:
    <select name="chapter" class="ui fluid search dropdown" id="chapter">
      <option value="chAll">Any Chapter</option>
      <option disabled role="separator">Select a chapter:</option>
      <option value="ch1">Chapter 1</option>
      <option value="ch2">Chapter 2</option>
      <option value="ch3">Chapter 3</option>
      <option value="ch4">Chapter 4</option>
      <option value="ch5">Chapter 5</option>
      <option value="ch6">Chapter 6</option>
      <option value="ch7">Chapter 7</option>
      <option value="ch8">Chapter 8</option>
      <option value="ch9">Chapter 9</option>
      <option value="ch10">Chapter 10</option>
      <option value="ch11">Chapter 11</option>
      <option value="ch12">Chapter 12</option>
      <option value="ch13">Chapter 13</option>
      <option value="ch14">Chapter 14</option>
      <option value="ch15">Chapter 15</option>
      <option value="ch16">Chapter 16</option>
      <option value="ch17">Chapter 17</option>
      <option value="ch18">Chapter 18</option>
      <option value="ch19">Chapter 19</option>
      <option value="ch20">Chapter 20</option>
      <option value="ch21">Chapter 21</option>
      <option value="ch22">Chapter 22</option>
      <option value="ch23">Chapter 23</option>
      <option value="ch24">Chapter 24</option>
      <option value="ch25">Chapter 25</option>
      <option value="ch26">Chapter 26</option>
      <option value="ch27">Chapter 27</option>
      <option value="ch28">Chapter 28</option>
      <option value="ch29">Chapter 29</option>
      <option value="ch30">Chapter 30</option>
      <option value="ch31">Chapter 31</option>
      <option value="ch32">Chapter 32</option>
      <option value="ch33">Chapter 33</option>
      <option value="ch34">Chapter 34</option>
      <option value="ch35">Chapter 35</option>
    </select>   
    <br>
    <div class="ui two column doubling stackable grid">
        <!-- Selectors for Voice, Tense, Conjugation, and Mood -->
      <div class="column"> Voice:
        <select name="voice" class="ui fluid search dropdown" id="voice">
            <option value="vocAll">Any Voice</option>
            <option disabled role="separator">Select a voice:</option>
            <option value="usrAct">Active</option>
            <option value="usrPas">Passive</option>
        </select>
     </div>
      <div class="column"> Tense:
        <select name="tense" class="ui fluid search dropdown" id="tense">
            <option value="tenAll">Any Tense</option>
            <option disabled role="separator">Select a tense:</option>
            <option value="usrPres">Present</option>
            <option value="usrImp">Imperfect</option>
            <option value="usrPerf">Perfect</option>
            <option value="usrPluPerf">PluPerfect</option>
            <option value="usrFut">Future</option>
            <option value="usrFutPerf">Future Perfect</option>
        </select>
     </div>
     <div class="column"> Conjugation:
        <select name="conj" class="ui fluid search dropdown" id="conj">
            <option value="conjAll">Any Conjugation</option>
            <option disabled role="separator">Select a conjugation:</option>
            <option value="usr1st">1st</option>
            <option value="usr2nd">2nd</option>
            <option value="usr3rd">3rd</option>
            <option value="usr4th">4th</option>
        </select>
     </div>
     <div class="column"> Mood:
        <select name="mood" class="ui fluid search dropdown" id="mood">
            <option value="moodAll">Any Mood</option>
            <option disabled role="separator">Select a mood:</option>
            <option value="usrInd">Indicative</option>
            <option value="usrInf">Infinitive</option>
            <option value="usrImp">Imperative</option>
        </select>
     </div>
    </div> 
    <br>
    <input type="submit" class="ui fluid button" name="submitBtn">
    </form>
    </div>

 <!-- HTML to submit Ajax to another page -->
    <script type="text/javascript">

        $(document).ready(function() {  

            // submit form using $.ajax() method

            $('#mainForm').submit(function(e){

                e.preventDefault(); // Prevent Default Submission

                $.ajax({
                    url: 'submitDecline.php',
                    type: 'POST',
                    data: $(this).serialize() // it will serialize the form data
                })
                .done(function(data){
                    $('#form-content').fadeOut('slow', function(){
                        $('#form-content').fadeIn('slow').html(data);
                    });
                })
                .fail(function(){
                    alert('Ajax Submit Failed ...');    
                });
            }); 
        });
    </script>



<!--    
    <h3 class="ui center aligned header">Doubling Stackable Grid</h3>
    <div class="ui stackable grid">

    </div>
    <div class="ui two column doubling stackable grid">
      <div class="column">
        <div class="ui segment">Content</div>
      </div>
      <div class="column">
        <div class="ui segment">Content</div>
      </div>
      <div class="column">
        <div class="ui segment">Content</div>
      </div>
      <div class="column">
        <div class="ui segment">Content</div>
      </div>
      <div class="column">
        <div class="ui segment">Content</div>
      </div>
      <div class="column">
        <div class="ui segment">Content</div>
      </div>
    </div>
     -->
  </div>
<?php $conn->close();    
?>
  <script src="scripts/script.js"></script>

</body>
</html>

正在加载的PHP文件：

    <p> This is a test </p>
<?php
session_start();

if( $_POST ){   
    $chaptSelect = $_POST['chapter'];   
    $tenseSelect = $_POST['tense']; 
    $voiseSelect = $_POST['voice']; 
    $moodSelect = $_POST['mood'];   
    $conjSelect = $_POST['conj'];

    if( $chaptSelect == "Any Chapter" ) {
        echo("You selected any chapter")    
    }

?>

<p> This is a test </p>

0 个答案:

没有答案
相关问题
最新问题