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 |