javascript - PHP、ajax 和 jQuery 的 Onclick 事件不起作用

标签 javascript php jquery ajax

我想在 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;
}
?>

最佳答案

您正在调用 <input>的值,而不是您设置的名称。

更改您的 clickBtnValue对此:

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

因为它有 Add_Button/Modify_Button/etc.

要将新按钮附加到您的 div,首先给它一个 id ,这样我们就可以继续调用它:

<div id="my-buttons">

现在在您的ajax中请求,简单 jQuery.append() div 的 html:

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

关于javascript - PHP、ajax 和 jQuery 的 Onclick 事件不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30970663/

相关文章:

javascript - 使用固定参数的自定义顺序来 Currying Javascript 函数

javascript - 以下 agularjs Controller 定义有什么区别?

php - PHP 数组是否需要在使用前声明?

javascript - Jquery val() 总是获取第一个选择值,无论选择哪个

javascript - HTML5 Canvas + JS 库中的选择/拖放功能?

php - 微软图形 API - AADSTS90094 : The grant requires admin permission

php - osTicket 无法访问邮箱中的文件夹

javascript - 如何使用扩展的 jQuery 函数?

javascript - Chrome 失败的图像背景卡住问题

javascript - 谷歌地图对象的 JSON.stringify