javascript - 在以下情况下如何使用 AJAX 实现删除功能？

Question

我的网站使用 PHP、Smarty、MySql、jQuery 等。我正在从数据库中获取大量数据并将这些数据显示在网页上。该数据只不过是匹配的问题 ID。获取所选主题的所选主题的匹配问题ID并将其显示到网页上需要很长时间。现在我想要实现的是通过单击删除图标来删除问题。但这应该通过使用 AJAX 来完成，以便删除所选的 Question_id 并显示其他匹配的问题 id。执行此操作时，页面不应刷新。所以我必须仅使用 AJAX 来完成此操作。有人可以在这方面帮助我吗？为了您更好地理解，我将 PHP 文件和 Smarty 模板的代码片段放在下面。我还附上了显示匹配 Question_ids 的 UI 屏幕截图。目前我已经通过 jQUery Colorbox 弹出窗口实现了正常的删除功能。PHP文件中的代码如下:match_question.php

<?php
$objQuestionMatch  = new QuestionMatch();
switch($op) { 
case "delete":
      if($request['question_id']!="") 
        $question_id = $request['question_id'];

      if(!empty($question_id)) {

        /*Fetch the subject_id and topic_id of the question to assign into a query string*/
        $question_data = $objQuestionMatch->GetSubjectIdAndTopicId($question_id);

        $subject_id = $question_data['question_subject_id'];
        $topic_id   = $question_data['question_topic_id'];

        $ret = $objQuestions->DeleteQuestion($question_id);

        // if question is not deleted come back on the same page of match question ids
        if(!$ret)
          $return_url = "match_question.php?subject_id=".$subject_id."&topic_id=".$topic_id;
        else
          $return_url = "match_question.php?subject_id=".$subject_id."&topic_id=".$topic_id."&del_questions_suc=1";

        header("Location:".$return_url);
      }      
      die();
      break;


    } 
    ?>

Smarty模板文件如下:匹配问题.tpl

<div class="breadcrumb-wrap">

{include file='resources-sub-menu.tpl'}

  <ul class="page-flow">
    <li><a href="#">Home</a><span>></span></li>
    <li>Questions</li>
  </ul>
</div>
<h1 class="c-heading"> Match Questions </h1>
<div class="c-grad-box fnShowData">
  <div class="form-wrapper">
    <form id="view-questions-form" name="questions_filter" action="{$control_url}modules/questions/match_question.php" method="post">
            <input type="hidden" name="page" id="page" value="1" >
      <div class="w50">              
        <ul>
          <li>
            <label>Subjects</label>
            <div class="form-element">
              <select name="subject_id" id="subject_id" onchange="get_topics_by_subject(this.value, 'get_topics_by_subject_for_filter', '#topic_id'); return false;">
                <option value="">All</option> 
                {foreach from=$all_subjects item=subjects key=key} 
                <option value="{$subjects.subject_id}" {if $subject_id == $subjects.subject_id} selected="selected"{/if}>{$subjects.subject_name}</option>
                {/foreach}
              </select>
            </div>
          </li>
        </ul>
      </div>
      <div class="w50">              
        <ul>
          <li>
            <label>Topics</label>
            <div class="form-element">
              <select name="topic_id" id="topic_id">
                    <option value="">All</option> 
                    {foreach from=$all_topics item=topics key=key} 
                    <option value="{$topics.topic_id}" {if $topic_id==$topics.topic_id} selected="selected"{/if}>{$topics.topic_name}</option>
                    {/foreach}
                  </select>
            </div>
          </li>
          <li>
            <div class="find-que-ans">
              <p class="custom-form"><label></label></p>
              <input type="submit" class="c-btn submit_form" name="btn_submit" id="btn_submit" value="Match Questions" />
            </div>
          </li>                           
        </ul>
      </div>        
    </form>
  </div>
</div>
{if "" != $info_msg} <div class="c-msg-seccess"> {$info_msg} <a class="c-close fnClose" href="#"></a> </div>{/if}
<br/><br/>
<form id="delete-questions-form" name="delete-questions-form" action="{$control_url}modules/questions/match_question.php" method="post">
<table width="100%" class="base-table tbl-practice" cellspacing="0" cellpadding="0" border="0">
  <tr class="evenRow">
    <th width="33%" style="text-align:center;" class="question-id">Que ID</th>
    <th width="33%" style="text-align:center;" class="question-id">Matching Que IDs</th>
    <th width="33%" style="text-align:center;" class="question-id">Percentage(%)</th>
  </tr>
{if $all_match_questions}
  {foreach from=$all_match_questions item=qstn key=key}   
    {if $qstn.similar_questions_ids_and_percentage}
  <tr class="oddRow">
    <td class="question-id" align="center" valign="top">
      <a href="{$qstn.return_url}" title="View question" class="inline_view_question_detail">QUE{$qstn.question_id}</a>{if $qstn.question_appeared_count gt 0}-Appeared({$qstn.question_appeared_count}){/if}
    </td>
    <td class="question" align="center" valign="top">
      {foreach from=$qstn.similar_questions_ids_and_percentage item=question key=q_no}
        {if $question.question_id!=''}
      <a href="{$qstn.return_url}" title="View question" class="inline_view_question_detail">QUE{$question.question_id}</a>{if $question.question_appeared_count gt 0}-Appeared({$question.question_appeared_count}){/if}
      {if $question.question_appeared_count eq 0}
      <a href="#deletePopContent" class="c-icn c-remove delete_question" delhref="{$control_url}modules/questions/match_question.php?op=delete&question_id={$question.question_id}&subject_id={$subjects.subject_id}&topic_id={$topics.topic_id}" title="Delete question"> Delete</a>
      {/if}
        {/if}<br />
      {/foreach}
    </td>
    <td class="question" align="center" valign="top">
      {foreach from=$qstn.similar_questions_ids_and_percentage item=question key=q_no}
        {if $question.percentage!=''}{$question.percentage}{/if}<br />
      {/foreach}               
    </td>
  </tr>
    {/if}
  {/foreach}
{else}
  <tr>
    <td colspan="2" align="center"><b>No Questions Available</b></td>
  </tr>
{/if}
</table>
</form>
<div class="hidden">
  <div id="deletePopContent" class="c-popup">
    <h2 class="c-popup-header">Delete Question</h2>
    <div class="c-content">         
      <h3>Are you sure to delete this question?</h3>
      <p class="alert"><strong>You are about to perform an action which can't be undone</strong></p>
      <a href="#"class="c-btn">No</a><a href="#"class="c-btn" id="delete_url">Delete</a> 
    </div>
  </div>
</div>
{literal}
<script language="javascript" type="text/javascript">
$(document).ready(function(){
  $(".inline_view_question_detail").colorbox({href:$(this).attr('href'),width:'auto', height:'auto'});

  $(".delete_question").click(function(e) { 
    var delete_url = $(this).attr('delhref');
    $('#delete_url').attr('href', delete_url);
    $(".delete_question").colorbox({inline:true, width:666});   

    $(".c-btn").bind('click', function(){
      $.colorbox.close();
    });
  });
});
</script>
{/literal}

Answer 1

我的方法删除了该项目，然后直接重新加载页面。如果不想重新加载，请使用 hide()

function handleDelete()
{
var tbody = $('tbody tr');
$('td div.delete.order').click(function() {
    var status = window.confirm('Do you really want to delete your article?');
    if (status)
    {
        if(! $('td div.delete.order').hasClass('confirm'))
        {
            id = $(this).attr('id');
            var data = {
                id_delete: id,
            };
            $.ajax({
                url: 'your PHP script url',
                dataType: 'json',
                type: 'post',
                data: data,
                success: function(data) {
                    //Item removed, now reload
                    $(this).parent().remove();
                        window.location.reload(true);

                }
            });
        }

});

}