jQuery AJAX调用php函数
[英]JQuery AJAX call to php function
问题描述
I am trying to replace page reloading PHP scripts in a web page with AJAX calls. 
我试图用AJAX调用替换网页中的页面重载PHP脚本。
I am using JQuery to run the AJAX scripts but it doesn't seem to be doing anything so I attempted to write an incredibly basic script just to test it. 我正在使用JQuery运行AJAX脚本，但是它似乎没有做任何事情，因此我试图编写一个难以置信的基本脚本来对其进行测试。
My directory is as follows 我的目录如下
public_html/index.php
/scripts/phpfunctions.php
/jqueryfunctions.js
index.php contains index.php包含
<!DOCTYPE html>
<html>
<head>
<!-- jquery functions -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="scripts/jqueryfunctions.js"></script>
<!-- php functions -->
<?php include 'scripts/phpfunctions.php' ?>
</head>
<body>
<button type="button" id="testButt">TEST</button>
</body>
</html>
Then the phpfunctions.php page which I am trying to call contains just an echo if an argument is set 然后，如果设置了参数，我尝试调用的phpfunctions.php页面仅包含回显
<?php
if(isset($_GET["action"])) {
echo "test has been run";
}
?>
The jqueryfunctions.js script I am trying to run is 我正在尝试运行的jqueryfunctions.js脚本是
$(document).read(function () {
$('#testButt').on('click', function () {
console.log("jquery call worked"); // this bit does run when button is clicked
$.ajax({ // this bit doesn't seem to do anything
url: 'scripts/phpfunctions.php?action=run_test',
type: 'GET',
success: function (data) {
$('#ajaxdata').html(data);
},
error: function (log) {
console.log(log.message);
}
});
});
});
I see that the jqueryfunctions.js function is being called by the first console.log but it doesn't seem to be calling my phpfunctions.php function. 我看到第一个console.log正在调用jqueryfunctions.js函数，但似乎没有在调用我的phpfunctions.php函数。
I was expecting to see the php echo "test has been run" but this doesn't happen. 我期望看到php回显“测试已运行”，但是不会发生。
Did I miss something? 我错过了什么？
4 个解决方案
解决方案1
2 已采纳 2015-11-19 10:39:15
You should use isset() method: 您应该使用isset()方法：
<?php
if(isset($_GET["action"])) {
if($_GET["action"] == "run_test") {
echo "test has been run";
}
}
?>
and if you are using ajax then why do you need to include it on index page: 如果您使用的是Ajax，那么为什么需要在索引页面上包含它：
<?php include 'scripts/phpfunctions.php' ?>
and i can't find this element $('#ajaxdata') on your index page. 而且我在您的索引页面上找不到此元素$('#ajaxdata') 。
Also you can check the network tab of your inspector tool to see the xhr request to the phpfunctions.php and see if this gets successfull or there is any error. 您也可以检查检查器工具的“网络”选项卡，以查看对phpfunctions.php的xhr请求，看看是否成功或有任何错误。
解决方案2
1 2015-11-19 10:35:13
I think problem is here: 我认为问题出在这里：
$(document).read(function() {
$('#testButt').on('click', function() {
console.log("jquery call worked"); // this bit does run when button is clicked
$.ajax({ // this bit doesn't seem to do anything
url: 'scripts/phpfunctions.php',
type: 'GET',
data: {action:'run_test'}, // <------ Here
success: function(data) {
$('#ajaxdata').html(data);
},
error: function(log) {
console.log(log.message);
}
});
});
});
jQuery says : jQuery说 ：
Data to be sent to the server.
So you should set data: {key:'value'} 因此，您应该设置data: {key:'value'}
解决方案3
1 2015-11-19 10:42:04
Most things look fine, but your data attribute is designed for "POST" requests, try to add the data to the url as follows: 大多数情况看起来都不错，但是您的data属性是为“ POST”请求设计的，请尝试将数据添加到url中，如下所示：
$( document ).read( function ()
{
$( '#testButt' ).on( 'click', function ()
{
console.log( "jquery call worked" ); // this bit does run when button is clicked
$.ajax( { // this bit doesn't seem to do anything
url: 'scripts/phpfunctions.php?action=run_test', // Add the GET request to the end of the URL
type: 'GET',
//data: 'action=run_test', Unrequired noise :P (this is for post requests...)
success: function ( data )
{
$( '#ajaxdata' ).html( data );
},
error: function ( log )
{
console.log( log.message );
}
} );
} );
} );
And also ( as mentioned in my comments ), you need to finish your bodys closing tag: 而且（ 如我的评论中所述 ），您还需要完成身体的结束标记：
</body> <!-- Add the closing > in :P -->
</html>
I hope this helps :) 我希望这有帮助 ：）
解决方案4
0 2015-11-19 10:40:24
Where do you load ajaxfunctions.js? 您在哪里加载ajaxfunctions.js？ It look like in your code you never load the resource And change 看起来在您的代码中，您永远不会加载资源并进行更改
<button id="xxx">
In 在
<button type="button" id="xxx">
So the page isn't reloaded 因此该页面不会被重新加载
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.