Question

这是我的index.php：

<?php
function type_my_text(){
    echo filter_input(INPUT_POST, 'textfield')
}

$action = filter_input(INPUT_POST, 'action');
if($action == "typer"){
    type_my_text();
}
?>

<html>
    <head>
        <script src="js/jquery.js"></script>
        <script>
            function call_typer(){
                $.post('index.php', {action : "typer"});
            };
        </script>
    </head>
    <body>
        <form name="form" method="POST" action="index.php">
            <input type="text" name="textfield">
            <input type="submit" value="type" onclick="call_typer()">
        </form>
    </body>
</html>

使用此代码，当我单击提交按钮时，我尝试使用ajax（在这种情况下为type_my_text）调用post() PHP函数。我根据其他答案安装了这段代码，但它不起作用，我不知道我错过了什么。

过程：

html button click - ＆gt; call js call_typer() function - ＆gt; make jQuery.post() ajax request - ＆gt; php var $action receive "typer" - ＆gt; call php function type_my_text()

我希望这段代码在页面上写下我在文本字段中写的内容。当我提交按钮时，没有任何反应。我认为ajax请求正在发生，但filter_input(INPUT_POST, 'action')没有收到任何内容，也没有收到我期望的内容（"typer"作为值）。

没有引起任何错误。

Answer 1

您的$.post()是对index.php的AJAX请求。无论何时发出AJAX请求或任何HTTP请求，浏览器都会向服务器（托管index.php）发送HTTP请求，然后返回一些数据。在HTTP AJAX请求的特殊情况下，浏览器异步发送HTTP请求而不刷新页面，并且从服务器后台接收响应。

jQuery中典型的AJAX POST调用应如下所示：

$.post("index.php", {action: 'typer'}, function( data ) {
    // do something with data, e.g.
    console.log(data);
});

您的服务器文件（index.php）应该将一些数据返回给AJAX请求。因为您使用index.php来提供AJAX数据以及普通HTML，所以它看起来应该是这样的：

<?php
function type_my_text() { ... }

// Either serve data to AJAX call, or serve HTML of index page.
if ($_POST['action'] == "typer"){
    // serve AJAX call
    type_my_text();
}
else {
    // serve HTML
?>

<html>
 ...
</html>
<?php
}

但这很麻烦。

最好应用一些关注点分离 - 纯粹用于提供HTML的HTML文件和纯粹用于提供AJAX内容的PHP。换句话说，将您的HTML放入index.html，然后创建ajax.php（或任何您想要的名称），并将您的PHP代码放入其中。然后，您不需要像上面那样做丑陋的事情 - 在PHP文件中混合HTML代码。当然，请记住更改JS中的URL。

其他

在您的JS发出AJAX请求时，请确保阻止提交表单的默认浏览器操作 - 这是一个新页面请求。否则，你根本就没有做AJAX。

在jQuery中执行此操作的最简洁方法：

$('#my-form').on('submit', function(e) { e.preventDefault(); // important - to prevent page refresh $.post(...); // the AJAX call here });

然后在你的HTML中：

<form id="my-form"> <input type="text" name="textfield"> <input type="submit"> </form>

需要注意的主要事项：

为您的表单提供一个ID，以便您可以在jQuery中有效地找到它。无需采取任何行动/其他任何事情。

我认为你在AJAX之后用你的textfield输入做了一些事情。

避免使用内联JS。

尝试使用jQuery.post（）调用PHP函数

1 个答案: