javascript - 让 Javascript/jQuery 和 PHP 协同工作

Question

更新:好的，感谢下面 OneSneakyMofo 的帮助，我成功地使用 ajax 来调用 Submit.php 表单并让它返回例如 echo 语句。我的问题是我的 $post 值都没有被继承，例如，如果我用 if (isset($_POST['pizzacrustformid'])) { 启动我的 php 脚本，javascript 将返回空白，当我执行 var_dump 时也是如此($_POST);，没有任何内容被保存到其中，这意味着数据没有被保留，只是调用了 php 脚本。如果我需要做一些事情才能从表单中继承 POST 信息，请告诉我，就像使用 传统上的<提交>按钮。我已经更新了 Github 上的代码以反射(reflect)我的进展。 https://github.com/dhierholzer/Basiconlineordering再次感谢!

原帖:我刚开始使用 jquery 并在不加载新页面/刷新页面的情况下提交表单。

在我的代码中，我在一个页面上有多个表单，通过点击下一个按钮，通过淡入和淡出效果一次显示一个表单。

我现在的问题是，当我这样做时，当点击下一步按钮将这些表单选项保存到 session 中时，我似乎无法激活 PHP 脚本。

这是一个例子:

<!--First Pizza Form, Pick Pizza Crust Type-->
<div id="pizzacrust">
      <form method="post" name="pizzacrustform" id="pizzacrustformid">  
        <div id="main">
            <div class="example">
              <div>
                <input id="freshpizza" type="radio" name="pizzacrust" value="1" checked="checked"><label style="color:black" for="freshpizza"><span><span></span></span>Fresh Dough</label>
              </div>
              <div>
                <input id="originalpizza" type="radio" name="pizzacrust" value="2"><label style="color:black" for="originalpizza"><span><span></span></span>Original</label>
              </div>
              <div>
                <input id="panpizza" type="radio" name="pizzacrust" value="3"><label style="color:black" for="panpizza"><span><span></span></span>Deep Dish Pan</label>
              </div>              
            </div>
        </div>
     </form>                  
</div>
<div><button href="#" id="btn">Show Pizza Size</button></div>

这是我的第一个表单，需要注意的是，我使用的是普通按钮并使用 javascript 来完成提交部分，而不是 < Submit > 按钮。

这是 JavaScript:

 <!--Controls All Button Fades-->
 $('#btn').click(function(e){    
    $('#pizzacrust, #btn').fadeOut('slow', function(){
        $('#pizzasize, #btn2').fadeIn('slow');
        $('#pizzacrustformid').submit();        
    });
});

然后:

$(document).ready(function () {
    $('#pizzacrustformid').on('submit', function(e) {
        e.preventDefault();

    });
});

现在，作为一名传统的 php 程序员，我只需在表单中添加一个按钮，然后通过以下内容激活我的 php:

if (isset($_POST['submitted'])) { //MY Code To save values into sessions}

当表单通过 javascript 函数提交时，我似乎无法获得这样的函数。

这是我在 GitHub 中的完整代码，可以让您更轻松地了解更多这些表单现在如何协同工作。

https://github.com/dhierholzer/Basiconlineordering

请让我知道任何可能的解决方案再次感谢。

Answer 1

编辑:

OP，看起来您想要执行 AJAX，但您没有任何地方可以提交 AJAX。首先，您需要创建一个接受该表单的文件。

我们将其命名为submit.php。

准备就绪后，您就可以开始处理 AJAX 调用了。首先，您需要将代码与index.php 分开。

将其从index.php中取出并放入submit.php中:

if (isset($_POST['pizzacrustformid'])) {
// use a foreach loop to read and display array elements
echo '<p>hello!<p>';
}

在 Javascript 中，您需要执行以下操作:

$('#btn').click(function(e){    
        $.ajax({
          method: "POST",
          url: "some.php",
          data: $('#pizzacrustformid').serializeArray()
        })

          .done(function(data) {
            alert(data); //should be "Hello world"
            $('#pizzacrust, #btn').fadeOut('slow', function(){
              $('#pizzasize, #btn2').fadeIn('slow');
            });
          })
          .fail(function() {
            alert( "error" );
          })
         .always(function() {
           alert( "complete" );
         });        

});

这里发生的是提交时，您的表单数据将传递到submit.php页面，并且它将生成PHP代码。该代码将调用完成函数(如果成功)，调用警报，然后淡出到下一部分。

这应该会让你走上正确的道路。我会创建另一个分支并删除所有表单，并在继续之前完成此工作。

此外，我会将这一切设置在一个表单中，并显示第一部分，进行一些验证，然后继续进行下一部分，然后最终提交您需要的所有内容。

希望这有帮助。