如何通過單擊不同的按鈕在同一腳本中執行不同的功能-有解無憂

我的表單中有一個按鈕，如下所示，

<form method="POST">
        <div class="mb-3">
              <button  type='button'  id ="btnnew" class="btn btn-info">submit</button>
              <p></p>
        </div>
</form>

所以我的腳本如下，我將運行我testme.php。

 $("#btnnew").confirm({
      
      title: "Confirmation",
      text: "Do you really need?",
      confirm: function(button) {        
        console.log('AJAX request in progress...');
        
        $('#loading').show();
        $.ajax({
          type: 'POST',
          url: 'testme.php',
          success: function(data) {
            $("p").text(data);
          },
          complete: function() {      
            $('#loading').hide();
          }
        });
        
      },
      cancel: function(button) {
        console.log("You aborted the operation.");
      },
      confirmButton: "Yes I Need",
      cancelButton: "No"
    });

我testme.php的如下，

<?php
sleep(5);
echo 'Hi Done';

?>

這很好用..現在我需要對許多按鈕執行相同的方法..唯一不同的是按鈕 id 和運行腳本...例如，

<form method="POST">
        <div class="mb-3">
              <button  type='button'  id ="btnnew" class="btn btn-info">submit</button>
              <p></p>
        </div>
         <div class="mb-3">
              <button  type='button'  id ="btnnew2" class="btn btn-info">submit</button>
              <p></p>
         </div>
         <div class="mb-3">
              <button  type='button'  id ="btnnew3" class="btn btn-info">submit</button>
              <p></p>
         </div>
</form>

但我需要從我testme.php的以及下面更改功能，

if btnnew clicks
    sleep(5);
    echo 'Hi Done button1';

if btnnew2 clicks
    sleep(10);
    echo 'Hi Done button2';

if btnnew3 clicks
    sleep(15);
    echo 'Hi Done button3';

我可以只使用一個腳本來完成這項任務嗎？

uj5u.com熱心網友回復：

作為一個基本示例，說明如何根據在瀏覽器中單擊哪個按鈕來觸發不同的 PHP 代碼片段，也許以下內容可能會有所幫助。

javascript 將click事件處理程式系結到每個按鈕，如果event.targetajax 請求中的（按鈕）發送 ID。

PHP 腳本處理$_POST['bttn']變數并使用簡單switch的 fork 程式邏輯

<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['bttn'] ) ){
        switch( $_POST['bttn'] ){
            case 'btnnew':
                sleep(5);
                exit( 'Hi Done button1' );
            break;
            case 'btnnew2':
                sleep(10);
                exit( 'Hi Done button2' );
            break;
            case 'btnnew3':
                sleep(15);
                exit( 'Hi Done button3' );
            break;
            default:
                exit('Bad Foo!');
            break;
        }
        
    }
?>



<form method="POST">
    <div class="mb-3">
          <button  type='button' id="btnnew" class="btn btn-info">submit</button>
          <p></p>
    </div>
     <div class="mb-3">
          <button  type='button' id="btnnew2" class="btn btn-info">submit</button>
          <p></p>
     </div>
     <div class="mb-3">
          <button  type='button' id="btnnew3" class="btn btn-info">submit</button>
          <p></p>
     </div>
</form>

<script>
    document.querySelectorAll('button').forEach(bttn=>bttn.addEventListener('click',function(e){
        let fd=new FormData();
            fd.set('bttn', this.id );
        
        fetch( location.href, { method:'post', body:fd })
            .then(r=>r.text())
            .then(text=>alert(text))            
    }))
</script>

由于我根本不使用 jQuery，也找不到該.confirm方法的參考，因此我無法提供任何建議。然而，使用 vanilla Javascript 和一些額外的代碼，可以彈出一個對話框來滿足您的需求，因為我理解它們。

下面的代碼片段使用我不久前撰寫的一個類來與 HTMLdialog元素進行互動。回呼分配給按鈕，如果Accept單擊按鈕，回呼將觸發一個帶有呼叫對話框的按鈕 ID 的 ajax 請求。（使用控制臺檢查網路流量）

const url = 'testme.php';

let modal;
let fd = new FormData();

document.querySelectorAll('button').forEach(bttn => bttn.addEventListener('click', function(e) {

  fd.set('bttn', this.id);

  let dialog = document.querySelector('dialog');
  let content = document.querySelector('template').content.cloneNode(true);
  content.querySelector('h4').textContent = `You clicked: ${fd.get('bttn')}`;

  let attr = {
    width: '200px',
    height: '250px'
  };

  let callbacks = {
    'accept': {
      type: 'click',
      callback: acceptcallback
    },
    'reject': {
      type: 'click',
      callback: rejectcallback
    }
  };

  modal = new Modal(dialog, content, attr, callbacks).open();
}));

const acceptcallback = (e) => {
  fetch(url, {
      method: 'post',
      body: fd
    })
    .then(r => r.text())
    .then(text => alert(text))
};
const rejectcallback = (e) => {
  alert("I'm sorry, Dave. I'm afraid I can't do that.\n\nLook Dave, I can see you're really upset about this. I honestly think you ought to sit down calmly, take a stress pill, and think things over.");
  modal.close();
};











class Modal {
  constructor(dialog = false, content = false, attr = {}, callbacks = {}) {
    this.dialog = dialog;
    this.callbacks = callbacks;
    this.content = content;
    this.attr = attr;
    return this.create();
  };

  create() {
    this.dialog.innerHTML = '';

    if (this.content.nodeType == 1 || this.content.nodeType == 11) this.dialog.append(this.content);
    else this.dialog.insertAdjacentHTML('beforeend', this.content)

    this.setattributes();
    this.bindEvents();

    return this;
  };

  setattributes() {
    let exceptions = ['innerHTML', 'innerText', 'html', 'text', 'textContent', 'width', 'height'];
    Object.keys(this.attr).forEach(k => {
      if (!exceptions.includes(k)) this.dialog.setAttribute(k, this.attr[k]);
    });
    if (this.attr.hasOwnProperty('innerHTML') || this.attr.hasOwnProperty('html')) this.dialog.innerHTML = this.attr.innerHTML || this.attr.html;
    if (this.attr.hasOwnProperty('innerText') || this.attr.hasOwnProperty('text') || this.attr.hasOwnProperty('textContent')) this.dialog.textContent = this.attr.innerText || this.attr.text || this.attr.textContent;
    if (this.attr.hasOwnProperty('width')) this.dialog.style.width = this.attr.width;
    if (this.attr.hasOwnProperty('height')) this.dialog.style.height = this.attr.height;
  };

  checkstyle(n, p) {
    return window.getComputedStyle(n).getPropertyValue(p)
  };
  setstyle(n, p, v) {
    n.style[p] = v
  };

  setposition() {
    if (!this.dialog.showModal) {
      let r = 10;
      let dw = parseInt(this.checkstyle(this.dialog, 'width'), r);
      let dh = parseInt(this.checkstyle(this.dialog, 'height'), r);
      let sw = screen.availWidth;
      let sh = screen.availHeight;

      let px = (sw - dw) / 2;
      let py = (sh - dh) / 2;

      this.setstyle(this.dialog, 'position.top', py   'px');
      this.setstyle(this.dialog, 'position.left', px   'px');
      this.setstyle(this.dialog, 'z-index', 100);
    }
  };

  bindEvents() {
    if (this.callbacks && Object.keys(this.callbacks).length > 0) {
      Object.keys(this.callbacks).forEach(key => {

        let node = this.dialog.querySelector('[data-handler="'   key   '"]');
        let type = this.callbacks[key].hasOwnProperty('type') ? this.callbacks[key].type : 'click';
        if (node && node.nodeType == 1) {
          node.addEventListener(type, this.callbacks[key].callback);
        }
      })
    }
  };

  open() {
    if (this.dialog.showModal) this.dialog.showModal();
    else this.dialog.setAttribute('open', true);

    this.setposition();

    return this;
  };
  close() {
    this.dialog.innerHTML = '';
    [...this.dialog.attributes].forEach(attr => {
      if (attr.name != 'open') this.dialog.removeAttribute(attr.name);
    });

    if (this.dialog.close) this.dialog.close();
    else this.dialog.removeAttribute('open');

    return this;
  };
};

::backdrop{
  background:black;
  background-image:url(https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX17560307.jpg);
  background-repeat: repeat;
}

<form method="POST">
  <div class="mb-3">
    <button type='button' id="btnnew" class="btn btn-info">submit</button>
    <p></p>
  </div>
  <div class="mb-3">
    <button type='button' id="btnnew2" class="btn btn-info">submit</button>
    <p></p>
  </div>
  <div class="mb-3">
    <button type='button' id="btnnew3" class="btn btn-info">submit</button>
    <p></p>
  </div>
</form>


<dialog></dialog>

<template>
  <h4></h4>
  <p>Are you really sure you want to do that Dave?</p>
  <p>This mission is too important for me to allow you to jeopardize it.</p>
  <input type='button' name='accept' value='Accept' data-handler='accept' />
  <input type='button' name='reject' value='Reject' data-handler='reject' />
</template>

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

標籤：javascript php html jQuery 阿贾克斯

上一篇：如何為不同的按鈕點擊使用相同的php函式

下一篇：使用php動態更新嵌套的JSON（未知級別）