关于php:为什么使用AJAX提交的表单会重定向到下一页,并且错误/成功消息不会在同一页面上显示为警报?

Why the form submitted using AJAX is redirecting to next page and the error/success messages are not displayed into alert on the same page?

我正在为我的网站使用php、smarty、jquery、ajax等。下面是我使用ajax提交的表单的HTML代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<form name="question_issue_form" id="question_issue_form" action="http://localhost/xyz/pqr/web/control/modules/questions/question_issue.php">
      <input type="hidden" name="form_submitted" id="form_submitted" value="yes"/>
      <input type="hidden" name="op" id="op" value="question_issue"/>
      <input type="hidden" name="question_id" id="question_id" value="35718"/>

      <table class="trnsction_details" width="100%" cellpadding="5">
        <tbody>    
          <tr>
            <td></td>
            <td>
              <input type="checkbox" name ="que_issue[]" value ="Question is wrong" id ="chkQueWrong">Question is wrong</input>
            </td>
          </tr>
          <tr>
            <td></td>
            <td><input type="checkbox" name ="que_issue[]" value ="Answers are wrong" id ="chkAnsWrong">Answers are wrong</input></td>
          </tr>
          <tr>
            <td></td>
            <td><input type="checkbox" name ="que_issue[]" value ="Question direction is incorrect" id ="chkDirIncorrect">Question direction is incorrecct</input></td>                
          </tr>
          <tr>
            <td></td>
            <td><input type="checkbox" name ="que_issue[]" value ="Other" id ="chkOther">Other</input></td>          
          </tr>
          <tr>
            <td></td>
            <td class="set_message" style="display:none;"><textarea name="que_issue_comment" id ="que_issue_comment" rows="4" cols="25" maxlength="100"></textarea></td>      
          </tr>
          <tr>
            <td></td>
            <td><input type="submit" name="submit" value="Submit" id="report_question_issue" class="c-btn submit_form"/></td>
          </tr>
        </tbody>
      </table>
    </form>

提交表单的Ajax代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(document).ready(function() {
$('#question_issue_form').submit(function() {
var ans = confirm("Are you sure to report the question issue?");
    if (!ans) {
      return false;
    }
var post_url = $(this).attr('action');
$.ajax({
        type:"POST",
        url: post_url,
        data: $('#question_issue_form').serialize(),
        dataType: 'json',
        success: function(data) { alert(data);
          var error = data.error_message;
          if(error)
            alert(error);
          else {
            alert("Question issue has been reported successfully.");
            $.colorbox.close();
          }
        }
      });
    });
  });

我提交此表单的文件(questionu issue.php)的php代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?php
  require_once("../../includes/application-header.php");

  $objQuestionIssue = new QuestionIssue();

  prepare_request();
  $request = $_POST ;
$user_type = $_SESSION[SESSION_NAME_CONTROL][STAFF_TYPE];

  if($user_type == 'super_admin' || $user_type == 'admin' || $user_type == 'data_entry_operator' || $user_type == 'owner' || $user_type == 'faculty' || $user_type == 'content_development_head' || $user_type == 'test_admin' || $user_type == 'student_admin')
    $requested_user_type = 'staff';
  else      
    $requested_user_type = 'student';

    $form_data = array();
    $form_data['question_id']        = $request['question_id'];
    $form_data['reported_site_id']   = SITE_ID;
    $form_data['reported_user_type'] = $requested_user_type;
    $form_data['reported_user_id']   = $_SESSION[SESSION_NAME_CONTROL][STAFF_ID];
    $form_data['que_issue']          = implode(",", $request['que_issue']);
    $form_data['que_issue_comment']  = $request['que_issue_comment'];
    $form_data['que_issue_date']     = time();
switch( $op ) {
        case"question_issue":
          if($request['form_submitted']=='yes') {
                $ret = $objQuestionIssue->InsertQuetionIssue($form_data, $question_issue_error_messages);
                /*If condition : If there are any errors in submission of a report question form*/
                if(!$ret) {
                    $error_msg  = $objQuestionIssue->GetAllErrors();
                    $data = array();
                    $data['error_message'] = $error_msg['error_msgs'];
                    $data = json_encode($data);
                    echo $data;
                    die;
                /*Else condition : If there is no error in submission of a report question form*/  
                } else {
                    $data = array();
                    $data['success_message'] ="success";
                    $data = json_encode($data);
                    echo $data;
                    die;
                }
            } else {
                  $smarty->assign('question_id', $request['question_id']);
                  $file_to_show = 'question-issue.tpl';
                }          
                $smarty->display($file_to_show);
            break;  
            die;
  }  
?>

我面临的问题是,当我单击确认警报的OK按钮时,表单将被提交,但JSON格式的错误消息或成功消息将显示在空白屏幕上。

实际上,它们应该出现在弹出的警告中,页面不应该重定向到其他URL。但是错误/成功消息打印在空白的白页上,页面也被重定向到question_issue.php。有人能帮我避免这些事情并将错误/成功消息显示在同一页的警告框中吗?


我认为您应该防止表单的默认行为,因此它不会真正提交,而是只要求JSON:

1
2
3
$('#question_issue_form').submit(function(e) {
    e.preventDefault();
    // your code