PHP，ajax和jQuery的Onclick事件不起作用

Question

我想對PHP使用onclick事件以完成以下任務。 我想使用ajax來避免刷新頁面。 我想在事件單擊上創建按鈕。

我不知道如何將div按鈕與ajax結果結合在一起。

這是我的PHP文件： Button.php

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Dymanic Buttons</title>
        <script type= "text/javascript" src ="jquery-2.1.4.min.js"></script>    
        <script type= "text/javascript" src ="test.js"></script>
    </head>
    <body>
        <div>
            <input type="submit" class="button" name="Add_Button" value="Add Button"</>
            <input type="submit" class="button" name="Modify_Button" value="Modify    Button"</>
            <input type="submit" class="button" name="Delete_Button" value="Delete    Button"</>
        </div>

test.js包含以下內容：

$(document).ready(function () {
    $('.button').click(function () {
        var clickBtnValue = $(this).val();

        var ajaxurl = 'ajax.php',
            data = {
                'action': clickBtnValue
            };
        $.post(ajaxurl, data, function (response) {

            alert("action performed successfully");

        });
    });

});

而另一個php是ajax.php

<?php 

if (isset($_POST['action'])){
  switch($_POST['action']){
      case 'Add_Button':
  Add_Button();
  break;
  }

}
function Add_Button(){
    echo '<input type="submit" class="button" name="Test_Button" value ="Test Button"</>';
    exit;
}
?>

Answer 1

您正在調用<input>的值，而不是您將其設置為的名稱。

將您的clickBtnValue更改為此：

var clickBtnValue = $(this).attr('name');

^{由於它具有Add_Button / Modify_Button / Modify_Button}

要將新按鈕附加到您的div，請先為其提供一個id ，以便我們可以繼續調用它：

<div id="my-buttons">

現在在您的ajax請求中，只需將jQuery.append()的html插入div：

$.post(ajaxurl, data, function (response) {
    $('div#my-buttons').append(response);
});

Answer 2

您可能想要確保代碼的每個組件都首先工作。 問題可能出在您的AJAX調用中，它應類似於以下內容：

/** AJAX Call Start **/
    // AJAX call to dict.php
    $.ajax({

        /** Call parameters **/
        url: "ajax.php", // URL for processing
        type: "POST", // POST method
        data: {'action': clickBtnValue}, // Data payload

        // Upon retrieving data successfully...
        success: function(data) {}
});

另外，請確保使用正確的路由到PHP文件，並且PHP文件正在返回有效響應。

編輯：根據jQuery Docs，我相當確定問題出在您的AJAX調用內，特別是$.post()設置。 如果您想保持AJAX呼叫的結構化而不是我建議的結構，請參考此處進行正確的設置。

根據jQuery Docs：

 $.post( "ajax/test.html", function( data ) { $( ".result" ).html( data ); });

Answer 3

您可以使用以下命令將請求結果添加到div中：

$.post(ajaxurl, data, function (response) {

   $("div").append(response);
   alert("action performed successfully");

});

請注意，您按鈕的值是“添加按鈕”，而不是“ Add_Button”

PHP，ajax和jQuery的Onclick事件不起作用

問題描述

3 個解決方案

解決方案1
1 2015-06-22 01:02:44

解決方案2
0 2015-06-22 00:56:06

解決方案3
0 已采納 2015-06-22 01:02:50

PHP，ajax和jQuery的Onclick事件不起作用

問題描述

3 個解決方案

解決方案1 1 2015-06-22 01:02:44

解決方案2 0 2015-06-22 00:56:06

解決方案3 0 已采納 2015-06-22 01:02:50

解決方案1
1 2015-06-22 01:02:44

解決方案2
0 2015-06-22 00:56:06

解決方案3
0 已采納 2015-06-22 01:02:50