如何使用AJAX提交表單

-1

我有一個測驗網站。我想重新設計我的問題表單，以通過AJAX提交用戶給出的答案，在服務器上驗證答案並將結果和下一個答案一起顯示給用戶。請指導我如何做到這一點。我已經使用的代碼是：如何使用AJAX提交表單

<?php 

$a = $_REQUEST['ad']; 
include("connection.php"); 
if (isset($_REQUEST['ad'])) 
{ 
if ($_REQUEST['ad'] == $a) 
{ 

$q1 = "select * from question WHERE q_id= '$a' AND cat_id='General Knowledge'"; 
$rw = mysql_query($q1); 
if ($row = mysql_fetch_assoc($rw)) 
{ 
if ($a % 10 == 0) { 
    $qno = 10; 
} else { 
    $qno = substr($a, -1, 1); 
} 
?> 
<b><?php echo "Q" . $qno . ". "; 
    echo $row['q_desc']; ?></b><br/><br/> 
<div class="quizimage"> 
    <img src="images/<?php echo $a; ?>.jpg" alt="General Knowledge Quiz"/> 
</div> 
<font class="common"> 
    <table align="center"> 
     <form action="general-knowledge.php?ad=<?php echo $a; ?>" method="post"> 
      <tr align="center"> 
       <input type="radio" name="ans" 
         value="<?php echo $row['ans1']; ?>" <?php echo($_POST['ans'] == $row['ans1'] ? 'checked' : '') ?>/> 
       <?php echo $row['ans1']; ?> 
       <br/> 
       <input type="radio" name="ans" 
         value="<?php echo $row['ans2']; ?>" <?php echo($_POST['ans'] == $row['ans2'] ? 'checked' : '') ?>/> 
       <?php echo $row['ans2']; ?><br/> 
       <input type="radio" name="ans" 
         value="<?php echo $row['ans3']; ?>" <?php echo($_POST['ans'] == $row['ans3'] ? 'checked' : '') ?>/> 
       <?php echo $row['ans3']; ?><br/> 
       <input type="radio" name="ans" 
         value="<?php echo $row['ans4']; ?>" <?php echo($_POST['ans'] == $row['ans4'] ? 'checked' : '') ?>/> 
       <?php echo $row['ans4']; ?><br/> 
</font> 
<tr> 
    <td><input type=submit name=sub value=Submit_Answer></td> 
</tr></form></table> 
<table border="1" align="center"> 
    <div class="adunit3"> 
     <?php 
     include "adunit3.php"; 
     ?> 
    </div> 
    <?php 
    } 
    $_SESSION['quiz_visited'] = $a; 
    if (isset($_POST['sub'])) { 
     $a_value = $a; 
     $answer = $_POST['ans']; 
     $q2 = "select * from question where q_id=$a_value"; 
     $r2 = mysql_query($q2); 
     if ($row = mysql_fetch_array($r2)) 
      $trueans = $row['true_ans']; 

     if ($answer == $trueans) { 
      $score = $_SESSION['score']; 
      $score = ++$score; 
      $_SESSION['score'] = $score; 
      ?> 

      <div class="resultdisplay"> 
       Your answer is correct. <h3>General Knowledge Trivia</h3><?php echo $row['trivia']; ?> <br/>  <?php 
       if ($a % 10 == 0) { 
        $a = ++$a; 
        ?> 
        <b>Click <a href="general-knowledge.php?ad=<?php echo $a; ?>">Here</a> to view your result.</b> 

       <?php 
       } else { 
        $a = ++$a; 
        ?> 
        <b>Click <a href="general-knowledge.php?ad=<?php echo $a; ?>">Here</a> for next question.</b> 
       <?php 
       } 

       ?> 
      </div> 
     <?php 
     } else { 
      ?> 
      <div class="resultdisplay"> 
       Your answer is wrong. The correct answer is <i>'<?php echo $trueans; ?>'</i>. 
       <h3>General Knowledge Trivia</h3><?php echo $row['trivia']; ?> <br/> 
       <?php $a = ++$a; ?> 

       <b>Click <a href="general-knowledge.php?ad=<?php echo $a; ?>">Here</a> for next question.</b> 
      </div> 
     <?php 
     } 
    } 

    ++$a; 
    $a = ++$a; 

    } 
    } 

    ?> 

</table>

來源

2014-01-18 Ankur Gupta

你沒有javascript代碼，你需要與JS –

我要求幫助，瞭解非常JS代碼 –

使用此javascript（jquery代碼來提交表單）。

// frm_id is the id of the form 
$("#frm_id").submit(function() { 
    var url = "path/to/your/script.php"; // the script where you handle the form input and save to database. 
    $.ajax({ 
      type: "POST", 
      url: url, 
      data: $("#frm_id").serialize(), //serializes the form's elements. 
      success: function(data){ 
       alert(data); // show response from the php script. 
      } 
     }); 
    return false; // prevent to execute the actual submit of the form. 
});

作爲迴應（數據），您可以提供下一個問題的詳細信息。

來源

2014-01-18 07:30:27 Ravi

嘗試）這樣的事情

$("#form_id").submit(function() { 
    $.ajax({ 
      type: "POST", 
      url: this.action, 
      data: $(this).serialize(), //Serialize a form to a query string. 
      success: function(response){ 
       alert(response); //response from server. 
      } 
     }); 
    return false; // prevent form to submit. 
});

參考

jQuery的阿賈克斯（）=>http://api.jquery.com/jquery.ajax/

序列化（=>http://api.jquery.com/serialize/

jQuery的提交（）=>http://api.jquery.com/submit/

jQuery的交=>http://api.jquery.com/jquery.post/

例

來源

2014-01-18 07:37:08

我在JS非常缺乏經驗，你可以提供一些更多的幫助 –

@ user2801699檢查已編輯的答案 –

此代碼提交表單爲通常...頁面編輯您的代碼目前在http://bit.ly/1blP42O –

您可以使用以下結構做到這一點;

首先把$ad變量隱藏在你的窗體中;

<input type="hidden" name="ad" value="<?php echo $a?>"/>

然後

$.ajax({ 
    type: "POST", 
    url: 'general-knowledge.php', 
    data: $(".common form").serialize(), 
    success: function(data) { 
    if (data.result == true) { 
     alert("It is correct"); 
     window.location = "next_question.html" 
    } else { 
     alert("Incorrrect result"); 
    } 
    } 
});

檢查表單結果通過使用服務器端表單變量和問題的ID，並返回結果

來源

2014-01-18 07:37:48

看來這段代碼將刷新頁面..我想這樣做，而不刷新頁面.. –

不刷新頁面。它根據結果用ajax發送請求，它決定是否去下一個問題 –

1集形式ID =一般知識型

2-在你的head標籤上加載jquery lib如下

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

3-創建新的隱藏輸入<input type="hidden" id="q_id" value="<?php echo $a; ?>" />

4-爲ex：ajax創建新的php文件。PHP驗證用戶的答案，然後返回相應的HTML outbut該文件包含以下代碼：

<?php 
mysql_connect('localhost', 'root', 'root'); 
mysql_select_db('test'); 

$a = filter_var($_POST['q_id'], FILTER_SANITIZE_NUMBER_INT); 
$ans = filter_var($_POST['ans'], FILTER_SANITIZE_STRING); 

$q1 = "select * from question WHERE q_id=" . $a; 
$rw = mysql_query($q1); 
$row = mysql_fetch_object($rw); 
?> 

<?php if ($ans == $row->true_ans): ?> 
    <div class="resultdisplay"> 
     Your answer is correct. <h3>General Knowledge Trivia</h3><?php echo $row->trivia; ?> <br/>  <?php 
     if ($a % 10 == 0) { 
      $a = ++$a; 
      ?> 
      <b>Click <a href="general-knowledge.php?ad=<?php echo $a; ?>">Here</a> to view your result.</b> 

      <?php 
     } else { 
      $a = ++$a; 
      ?> 
      <b>Click <a href="general-knowledge.php?ad=<?php echo $a; ?>">Here</a> for next question.</b> 
      <?php 
     } 
     ?> 
    </div> 
<?php else: ?> 
    <div class="resultdisplay"> 
     Your answer is wrong. The correct answer is <i>'<?php echo $row->true_ans; ?>'</i>. 
     <h3>General Knowledge Trivia</h3><?php echo $row->trivia; ?> <br/> 
     <?php $a = ++$a; ?> 

     <b>Click <a href="general-knowledge.php?ad=<?php echo $a; ?>">Here</a> for next question.</b> 
    </div> 
<?php endif;

5標記之前增加您的網頁端以下腳本來處理您的Ajax請求ajax.php，然後適當的HTML添加到您的網頁

 <script> 
     $(document).ready(function() { 
      $("#general-knowledge-form").submit(function(event) { 
       var ans = $('input[name=ans]:checked').val(); 

       if (ans !== undefined) { 
        var q_id = $("#q_id").val(); 
        $.ajax({ 
         type: "POST", 
         url: "ajax.php", 
         data: {q_id: q_id, ans: ans} 
        }) 
          .done(function(html) { 
           $("#resultdisplay").empty(); 
           $("#resultdisplay").append(html); 
          }); 

       } else { 
        alert('Plz select your answer.'); 
       } 

       event.preventDefault(); 
      }); 
     }); 
    </script>

來源

2014-01-18 10:05:19 user3187357

如何使用AJAX提交表單

回答

相關問題