Question

我想在PHP中使用onclick事件来完成以下操作。我想使用ajax来避免刷新页面。我想在活动点击时创建按钮。

我不知道如何使用ajax结果加入div按钮。

这是我的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 / etc。}

要将新按钮附加到您的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文档，我很确定问题出在您的AJAX调用中，特别是您的$.post()设置。请参考here以确定正确的设置是否要保持AJAX调用的结构，而不是我建议的方式。

根据jQuery文档：

$.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 个答案: