AJAXPOST成功div上傳在幾秒鐘后消失-有解無憂

我在成功發布 AJAX 后遇到問題，更新后的 div 會在幾分鐘后消失

下面依次是jquery/PHP/POST資料。

按鈕點擊功能：

function Delete_ID(clickBtnValue,clickBtnID,clickBtnName) {
  var my_data = {"passvalue": clickBtnValue, "passid":clickBtnID, "passname":clickBtnName};
  $.ajax({
    type: 'POST',
    url: '../Programs/Programs.php',
    data: my_data,
    success: function (data) {
      $('#ProgramsTable').load("../Programs/ProgramChange.php");
      $('#update-div').html(data);
    }
  });
}

PHP DIV 顯示：

$list_programs = DB_Get_Program_List();
if (!is_null($list_programs)) {
  $html = '<br><div id="ProgramsTable"><div >';
  for ($ii=0; $ii < count($list_programs); $ii  ) {
    $html .= <<<HTML
    <div class="CELL">
      <form method="post" action>{$list_programs[$ii]["Program_Name"]}
        <button onclick="Delete_ID('Delete','{$list_programs[$ii]["Name_Hash"]}', '{$list_programs[$ii]["Program_Name"]}')" class="button">Delete</button>
        <button onclick="Delete_ID('Edit','{$list_programs[$ii]["Name_Hash"]}', '{$list_programs[$ii]["Program_Name"]}')" >Edit</button>
      </form>
    </div>
    HTML;
  }
}
echo $html;
echo "</div></div><div id='update-div'></div>";

在 Programs.php 中發布：

if (!empty($_POST)) {
    if ($_POST['passvalue'] == "Delete"){
      DB_Delete_Program_list($_POST['passid']);
      echo $_POST['passname'] . " has been deleted";
    }
    if ($_POST['passvalue'] == "Edit"){
      echo '  <div ><form  method="post">';
      echo '     <div style="margin-top:5px"><input type="text" style="height:20px;" id="'.$_POST['passid'].'" value="'.$_POST['passname'].'" size="40" maxlength="253"></div>';
      echo '    <div style="margin-top:10px"></div>';
      echo '    <div ><input  type="Submit" name="Edit_button"></div>';
      echo '  </form></div>';
    }
    return true;
}

當我按下洗掉時，它會顯示例如“程式1已被洗掉”然后消失當我按下編輯時，新的表格表格并顯示然后消失

這是我的問題的螢屏記錄

我需要更改什么才能使我的 div 資料“表”使用最新的 SQL 資料重繪，同時保留成功文本訊息？

DSICLAIMER 是的，我知道 EDIT POST 選項不是它應該的樣子，因為我只是在測驗成功訊息回傳。是的，有 SQL 緩解措施

uj5u.com熱心網友回復：

我相信發生的事情是當您單擊按鈕時，您在提交表單的同時也觸發了您的Delete_ID功能。因此，發生的情況是 JS 函式執行并顯示您的 div，但頁面也會重新加載，因此您只能看到它片刻。你需要做的是電話preventDefault()上event由生成的onclick事件。

作為切線，為了Delete_ID更容易地將資料傳遞給您的函式，我建議使用資料屬性，而不是將資料作為屬性傳遞給函式本身。

這就是我重做您的代碼的方式。

對于表單按鈕，洗掉該onclick屬性，并將這些data-屬性用于相關屬性。我還添加delete-button和edit-button類每個按鈕來區分它們。

$list_programs = DB_Get_Program_List();
if (!is_null($list_programs)) {
  $html = '<br><div id="ProgramsTable"><div >';
  for ($ii=0; $ii < count($list_programs); $ii  ) {
    $html .= <<<HTML
    <div >
      <form method="post" action>{$list_programs[$ii]["Program_Name"]}
        <button data-name-hash="{$list_programs[$ii]["Name_Hash"]}"  data-program-name="{$list_programs[$ii]["Program_Name"]}" >Delete</button>
        <button data-name-hash="{$list_programs[$ii]["Name_Hash"]}"  data-program-name="{$list_programs[$ii]["Program_Name"]}" >Edit</button>
      </form>
    </div>
    HTML;
  }
}
echo $html;
echo "</div></div><div id='update-div'></div>";

然后在您的 javascript 中，將點擊功能分配給具有匹配類的按鈕。這允許您訪問該event功能中的點擊。

$('.delete-button').click(Delete_ID);

現在，更新函式定義以使用單擊event并從資料屬性中提取資料：

function Delete_ID(event) {
  event.preventDefault(); // Stop the form from submitting so the page doesn't reload

  const clickedBtn = event.target; // This is a reference to the <button> itself. 

  const clickBtnValue = 'Delete'; // You could pass this via data attributes too; I assume you'll probably have a separate Edit_ID function though. 

  // Pull the values from the `data-` attributes on the clicked button
  // Note that JS converts the kebab-case attribute names (eg: data-name-hash) to camelCase with "data" removed (eg: nameHash). 
  const clickBtnID = clickedBtn.dataset.nameHash;
  const clickBtnName = clickedBtn.dataset.programName;

  var my_data = {"passvalue": clickBtnValue, "passid":clickBtnID, "passname":clickBtnName};
  $.ajax({
    type: 'POST',
    url: '../Programs/Programs.php',
    data: my_data,
    success: function (data) {
      $('#ProgramsTable').load("../Programs/ProgramChange.php");
      $('#update-div').html(data);
    }
  });
}

這是一個使用preventDefault資料屬性的非常基本的 JSFiddle 示例。

uj5u.com熱心網友回復：

當您按下洗掉/編輯按鈕時，您需要防止表單被提交，您可以通過洗掉表單標簽來完成

$list_programs = DB_Get_Program_List();
if (!is_null($list_programs)) {
    $html = '<br><div id="ProgramsTable"><div >';
    for ($ii=0; $ii < count($list_programs); $ii  ) {
        $html .= <<<HTML
            <div class="CELL">
                {$list_programs[$ii]["Program_Name"]}
                <button onclick="Delete_ID('Delete','{$list_programs[$ii]["Name_Hash"]}', '{$list_programs[$ii]["Program_Name"]}')" class="button">Delete</button>
                <button onclick="Delete_ID('Edit','{$list_programs[$ii]["Name_Hash"]}', '{$list_programs[$ii]["Program_Name"]}')" >Edit</button>
            </div>
        HTML;
    }
}

echo $html;
echo "</div></div><div id='update-div'></div>";

或在按鈕單擊事件上回傳 false

$list_programs = DB_Get_Program_List();
if (!is_null($list_programs)) {
    $html = '<br><div id="ProgramsTable"><div >';
    for ($ii=0; $ii < count($list_programs); $ii  ) {
        $html .= <<<HTML
            <div class="CELL">
                <form method="post" action>{$list_programs[$ii]["Program_Name"]}
                    <button onclick="Delete_ID('Delete','{$list_programs[$ii]["Name_Hash"]}', '{$list_programs[$ii]["Program_Name"]}'); return !1" class="button">Delete</button>
                    <button onclick="Delete_ID('Edit','{$list_programs[$ii]["Name_Hash"]}', '{$list_programs[$ii]["Program_Name"]}'); return !1" >Edit</button>
                </form>
            </div>
        HTML;
    }
}

echo $html;
echo "</div></div><div id='update-div'></div>";

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/347303.html

標籤：javascript php html 查询

上一篇：如何使用Scrapy高效抓取網站

下一篇：CSS中的Flex方向屬性