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