PHP，ajax和jQuery的Onclick事件不起作用
[英]Onclick event with PHP, ajax and jQuery not working
问题描述
I want to use an onclick event with PHP in order to accomplish the following. 
我想对PHP使用onclick事件以完成以下任务。 I would like to use ajax to avoid the page being refreshed. 我想使用ajax来避免刷新页面。 I want to create buttons on event click. 我想在事件单击上创建按钮。
I don't know how to join the div buttons with the ajax result. 我不知道如何将div按钮与ajax结果结合在一起。
Here is my PHP file: Button.php 这是我的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 contains this: 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");
});
});
});
And the other php that is ajax.php 而另一个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;
}
?>
3 个解决方案
解决方案1
1 2015-06-22 01:02:44
You're calling the <input> 's value, instead of it's name which you set it as. 您正在调用<input>的值，而不是您将其设置为的名称。
Change your clickBtnValue to this: 将您的clickBtnValue更改为此：
var clickBtnValue = $(this).attr('name');
Since it has Add_Button / Modify_Button /etc. 由于它具有Add_Button / Modify_Button / Modify_Button
To append the new button to your div, start by giving it an id , so that we can continue to call it: 要将新按钮附加到您的div，请先为其提供一个id ，以便我们可以继续调用它：
<div id="my-buttons">
Now in your ajax request, simply jQuery.append() the html to the div: 现在在您的ajax请求中，只需将jQuery.append()的html插入div：
$.post(ajaxurl, data, function (response) {
$('div#my-buttons').append(response);
});
解决方案2
0 2015-06-22 00:56:06
You probably want to make sure that each component of your code is working first. 您可能想要确保代码的每个组件都首先工作。 The problem may be in your AJAX call, it should be similar to the following: 问题可能出在您的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) {}
});
Also, make sure you are using the correct routing to your PHP file and that your PHP file is returning a valid response. 另外，请确保使用正确的路由到PHP文件，并且PHP文件正在返回有效响应。
EDIT: As per the jQuery Docs, I am fairly certain that the problem is within your AJAX call, specifically your $.post() setup. 编辑：根据jQuery Docs，我相当确定问题出在您的AJAX调用内，特别是$.post()设置。 Please refer here for the proper setup is you want to keep your AJAX call structured as is instead of the way I suggested. 如果您想保持AJAX呼叫的结构化而不是我建议的结构，请参考此处进行正确的设置。
As per the jQuery Docs: 根据jQuery Docs：
$.post( "ajax/test.html", function( data ) { $( ".result" ).html( data ); });
解决方案3
0 已采纳 2015-06-22 01:02:50
You can add the result of request to your div with this: 您可以使用以下命令将请求结果添加到div中：
$.post(ajaxurl, data, function (response) {
$("div").append(response);
alert("action performed successfully");
});
Note the value of your button is "Add Button", not "Add_Button" 请注意，您按钮的值是“添加按钮”，而不是“ Add_Button”
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.