让 Javascript/jQuery 和 PHP 一起工作

Question

更新： 好的，感谢下面 OneSneakyMofo 的帮助，我设法使用 ajax 调用 submit.php 表单并让它返回例如 echo 语句。我的问题是我的 $post 值都没有被继承，例如，如果我使用 if (isset($_POST['pizzacrustformid'])) { 启动我的 php 脚本，那么当我执行 var_dump 时，javascript 也会返回空白($_POST);, 没有保存任何内容，这意味着数据没有被转移，只是调用了 php 脚本。请让我知道我是否需要做一些事情才能让 POST 信息从表单中转移出去，就像使用 按钮传统上。 我已经在 Github 上更新了我的代码以反映我的进步。 https://github.com/dhierholzer/Basiconlineordering 再次感谢！

原帖： 我是使用 jquery 并在不加载新页面/刷新页面的情况下提交表单的新手。

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

我的问题是现在我这样做了，当我点击下一步按钮以将这些表单选项保存到会话中时，我似乎无法激活 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 来完成提交部分。

这是 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 代码。该代码将点击 done 函数（如果成功），调用警报，然后淡出到下一部分。

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

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

希望这会有所帮助。

Answer 2

我建议您通过 ajax 进行请求，这里有一个教程和示例： http://www.w3schools.com/jquery/jquery_ajax_get_post.asp

删除所有关于提交的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>

Answer 3

我认为你需要使用 click() func 调用 ajax，不要使用 on() 提交。提交动作使当前页面将刷新。我稍后会查看您的代码，但您应该尝试上面的这个解决方案。