Ajax 和 PHP：是否可以在一次提交中执行 Javascript、Ajax 函数和 PHP 帖子？

Question

如果这是可能的，为什么它不起作用？ 代码太多了，我只放伪代码，不告诉我这是语法错误，因为所有元素都是独立工作的，问题在于将它们集成在一起时。

我有：

设置：

1) - 具有各种输入和单个提交按钮的 html 表单。像这样：

<form action="" method="POST">
    <input type="submit"></input>
</form>

2) - 用于提交和获取表单输入值的 PHP 代码，它正在工作。例如：

<?php if($_SERVER['REQUEST_METHOD'] == 'POST') {
    // get values here, which is working //
    // database inserts, which are working too //
 ?>

3) - 运行基于客户端的测试并在 console.log 中打印输出的 Javascript js_function()。例如：

<script>
    (function(w) {
     // code that runs //
     // prints results on console.log() //
    }
</script>

4) - 一个 Ajax 函数（在 Javascript 主函数中，在结束标记之前的末尾），它获取在 console.log 中打印的变量并将其即时发布到数据库，如下所示：

var JSoutput = "js_function_return";

function loadXMLDoc(){
    // check browser, status and response, etc //
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200){  
        // use a div to print response, which works all the time                    
    }

    xmlhttp.open("GET","boguspage.php?JSoutput="+JSoutput,true);
    xmlhttp.send();
}

5) - 一个虚假的 php 页面，其中收集了 Ajax 查询的 GET 结果并将其传递到数据库。这行得通。

工作原理：

如果我把我的javascript函数加载到bodybody onload="js_function()"和Ajax函数onclick="loadXMLDoc()"在“提交”按钮上，一切都可以无缝运行，没有问题。所以，这不是语法问题，请在回答之前仔细阅读。

看似不可能的事情：

1) - 我需要在单个 POST 上同时执行 Javascript 函数和 Ajax 函数，或者，

2) - 将 Javascript 移动到按钮的 onclick 事件中，并让 Ajax 函数等待 Javascript 函数执行，并在完成后自行对数据库执行自动 POST 或 GET .

我不知道如何完成。我已经尝试了 3 天，虽然每件作品都单独工作或加载到正文中，但在提交时加入它们会导致第一个 Javascript 函数执行速度过快，因此 Ajax 调用返回空，并且出现 PHP 未定义变量错误。但是，如果我在正文中首先执行 Javascript，则不会发生这种情况。

但我需要在一次提交时完成所有操作。我怎样才能做到这一点？

Answer 1

从我之前遇到的这个问题，我这样做的方法是在 javascript 中设置一个全局变量，然后在表单提交时根据这个先前设置的变量阻止表单返回 false，然后我执行我需要的任何代码并重置变量并重新提交不会执行实际提交操作的表单。这是一个简单的例子：

<form onsubmit="doAction(this);">
    <input type="submit">
</form>

Javascript：

<script>
    var preventFormSubmit = true;
    function doAction(this){
        if (preventFormSubmit) {
            preventFormSubmit = false;
            // Do Whatever stuff you need, this time the form won't submit
            this.submit(); // Usually I would put this in ajax's success reponse function
            return false;
        } // else do nothing, submit the form as usual
    }
</script>

我的 javascript 有点生疏，因为我主要写 jquery，但你应该明白这一点。

Answer 2

编写一个传递回调的函数：

    function taskThatTakesSometime(callback){
        // Do stuff here that takes time
        alert("Do some intense stuff");
        alert("Do some more stuff");
        // when done call the callback
        callback();
    }

    function ajax(){
        //do your ajaxrequest here
        alert("calling ajax");
    }

    // Call your intense task and configure the
    // callback for calling ajax when done
    taskThatTakesSometime(function(){
        ajax();
    });

JSFIDDLE

您还应该考虑在 body 元素 reading this question 上使用 onload 的设计。