让Javascript/jQuery和PHP协同工作

更新： 好的，感谢下面OneSkillyFo的帮助，我已经设法使用ajax调用submit.php表单，并让它返回一个echo语句。我的问题是，我的$post值都没有被继承，例如，如果我用if（isset（$\u post['pizzaccrapformid']）{启动我的php脚本，javascript将返回空白，当我执行var_转储（$\u post）时也是如此；中，没有保存任何内容，这意味着数据没有转移，只是调用了php脚本。请告诉我是否需要执行某些操作，以便像使用 按钮。 我已经在Github上更新了我的代码以反映我的进度。再次感谢

原职： 我不熟悉使用jquery并在不加载新页面/刷新页面的情况下提交表单

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

我的问题是现在我这么做了，当点击next按钮将这些表单选项保存到会话中时，我似乎无法激活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>

作为一名传统的php程序员，我的表单中只有一个按钮，然后通过如下方式激活我的php：

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

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

这是我在GitHub中的完整代码，可以更容易地看到这些表单现在是如何协同工作的

请让我知道任何可能的解决方案

---

再次感谢。

我建议您通过ajax执行请求，这里有一个教程和示例：

删除所有关于提交的jquery函数

使用php代码创建一个名为blu.php的文件

在index.php中添加jquery代码

有了这个，你最后只需要做一次请求。我希望这对你有所帮助

<?php echo 'tus datos son: '; 
echo ' '.$_POST["data1"]; 
echo ' '.$_POST["data2"]; 
echo ' '.$_POST["data3"]; ?>


<script>
    $(document).ready(function(){
    $("#btn5").click(function(){

        var pizzacrust= $('input[name="pizzacrust"]:checked').val();
        var pizzasize= $('input[name="pizzasize"]:checked').val();
        var pizzatoppings= $('input[name="pizzatoppings"]:checked').val();


        $.post("blu.php",
        {
          data1: pizzacrust,
          data2: pizzasize,
          data3: pizzatoppings
        },
        function(data,status){
            alert("Data: " + data);
        });
    });
    });
    </script>

$（文档）.ready（函数（）{
$（“#btn5”）。单击（函数（）{
var pizzacurse=$（'input[name=“pizzacurse”]：checked'）.val（）；
var pizzasize=$（'input[name=“pizzasize”]：checked'）.val（）；
var pizzatoppings=$（'input[name=“pizzatoppings”]：checked'）.val（）；
$.post（“blu.php”，
{
数据1：比萨饼皮，
数据2：比萨饼大小，
数据3：比萨配料
},
功能（数据、状态）{
警报（“数据：”+数据）；
});
});
});

编辑：

哦，看起来你想做AJAX，但是你没有任何地方可以提交你的AJAX。首先，你需要创建一个接受表单的文件

让我们称之为submit.php

有了它，您就可以开始处理AJAX调用了

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

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

}))

这里发生的是在提交时，表单数据将传递到submit.php页面，并生成php代码。该代码将命中done函数（如果成功），调用警报，然后淡出到下一部分

这会让你走上正确的道路。我将创建另一个分支，去掉所有的表单，并在继续之前完成这项工作

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

---

希望这有帮助。

我认为您需要使用click（）函数调用ajax，不要使用on（）提交。提交操作使当前页面刷新。稍后我将查看您的代码，但您应该尝试上面的解决方案。

在我看来，除了执行提交的ajax调用之外，您拥有所有功能……实际上，您似乎有一个为#PizzaToppingFormid定义的ajax调用。这样行吗？你在控制台中得到了什么？是的，这是我从互联网上获得的一小部分代码，但是我使用ajax的有限经验限制了我充分了解需要从中获得什么的能力。。我猜我需要通过ajax将表单$post数据发送到PHP，然后就不会返回了，因为PHP是服务器端语言，将其存储到会话中，直到我稍后将其粘贴到DB中。。但我甚至可能错误地认为它不归还任何东西。请让我知道这是否是我需要做的总体想法。。任何代码都将不胜感激。在执行

e.preventDefault（）

这将阻止表单以“正常方式”提交之后，您可以执行如下POST调用：

$.POST（'your_php.php'，$（'pizzaccrustformid'）.serialize（），函数（数据）{alert（'AJAX调用完成，响应：'+data}）

。信息将通过AJAX发送，您的PHP将使用

$\u POST

正常工作。在回调函数（我在其中执行了

警报（）

）中，执行更新网站所需的操作（显示成功消息表或其他内容）。谢谢你，我正在尝试使用ajax，但我仍然不太走运，如果可以的话，请看一下我在Github上的完整代码，我在源代码底部的一个函数中有一点ajax。这只是我在网上下载的一些代码，但我不完全确定如何使用它。我知道它需要激活t他编写了php脚本或将表单中的数据发送到php脚本，这样我就可以将数据存储在需要服务器端的会话中。再次感谢！嗨，试试这个答案。它在ajax中工作得很好。这种方法在最后只发送一次请求，而不是多次。干得不错，伙计，起初我对你的答案不太满意，但最终还是成功了玩了一会儿之后。再次感谢。介意再解释一下你的答案吗？谢谢你的帮助！所以据我所知，我应该使用我的$（'#btn'）。单击（函数（e）启动对的函数调用

<?php echo 'tus datos son: '; 
echo ' '.$_POST["data1"]; 
echo ' '.$_POST["data2"]; 
echo ' '.$_POST["data3"]; ?>


<script>
    $(document).ready(function(){
    $("#btn5").click(function(){

        var pizzacrust= $('input[name="pizzacrust"]:checked').val();
        var pizzasize= $('input[name="pizzasize"]:checked').val();
        var pizzatoppings= $('input[name="pizzatoppings"]:checked').val();


        $.post("blu.php",
        {
          data1: pizzacrust,
          data2: pizzasize,
          data3: pizzatoppings
        },
        function(data,status){
            alert("Data: " + data);
        });
    });
    });
    </script>

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

$('#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" );
         });