JQuery/AJAX 和 PHP 中的 POST 表单提交答案

【问题标题】：POST Form Submission in JQuery/AJAX and PHPJQuery/AJAX 和 PHP 中的 POST 表单提交
【发布时间】：2019-09-21 14:50:24
【问题描述】：

我对在 JQuery/AJAX 和 PHP 中处理表单提交有点陌生，所以我一直在尝试在线学习一些教程，但遇到了一些问题。

我正在尝试构建一个通过 PHP 处理提交的表单。这是我的 index.html 文件。

<body>

    <h1>Food Preference</h1>

    <p>Please let us know what types of foods you would like to see on the menu.</p>

    <form id="food-form">
        <label for="appetizer">Appetizer</label>
        <input type="text" id="appetizer" required>

        <label for="entree">Entree</label>
        <input name="entree" type="entree" id="entree" required>

        <label for="dessert">Dessert</label>
        <textarea name="dessert" id="dessert" required></textarea>

        <button id="submit_button" type="submit">Send</button>

        <p id="form_content">
        </p>
    </form>

这是我的 index.js 文件

 jQuery.ajax({
        url: "handler.php",
        data: "appetizer=" + $("#appetizer").val() +
              "&entree=" + $("#entree").val() +
              "&dessert=" + $("#dessert").val(),
              type: "POST",
              success: function(data) {
                  $("#form_content").html(data);
              },
              error: function() {}
    });

这里是 handler.php

<?php

class runForm {
public function handle_food_form($request) {

    if(opinion($_POST["appetizer"], $_POST["entree"], $_POST["dessert"])) {
        print "<p class='success'>Thank you for your opinion.</p>";

        return array('post_id' => $new_post_id );
    }
 }
}

runForm();
?>

我的提交似乎没有保存在任何地方，或者如果有，我不确定如何找到它。任何人都可以为我可能做错的任何事情提供任何指示吗？

我想知道 handler.php 中的这一行是否正确，因为我还没有真正定义“意见”。

if(opinion($_POST["appetizer"], $_POST["entree"], $_POST["dessert"]))

【问题讨论】：

标签： javascript php jquery ajax forms

【解决方案1】：

这段代码sn-p你有很多问题，你应该先检查PHP显示给你的错误，并尝试先解决它们。

PHP 文件 (handler.php)

opinion() 函数未定义。
runForm() 不是一个函数，它是一个类的名字，如果你想调用handle_food_form() 函数，那么你可以把它变成一个静态函数并像这样调用它runForm::handle_food_form();

你的 PHP 文件的最终版本应该是这样的

<?php


class RunForm {

    public static function opinion($appetizer, $entree, $dessert)
    {
        // do your logic here and return true or false
        return true;
    }

    public static function handle_food_form() {

        if (!isset($_POST["appetizer"])) $_POST["appetizer"] = null;
        if (!isset($_POST["appeentreetizer"])) $_POST["entree"] = null;
        if (!isset($_POST["dessert"])) $_POST["dessert"] = null;

        if(SELF::opinion($_POST["appetizer"], $_POST["entree"], $_POST["dessert"])) {
            $htmlMsg =  "<p class='success'>Thank you for your opinion.</p>";
            /*
                $con is a MySQLI object
                $con->query("insert into table ........");
                $new_post_id = $con->insert_id;
            */

            return array('post_id' => $new_post_id, 'htmlMsg' => $htmlMsg );
        } else {
            return array('post_id' => null , 'htmlMsg' => "");
        }
    }
}

echo RunForm::handle_food_form()['htmlMsg'];

客户端

您应该使用encodeURIComponent() 对URL 的参数进行编码，以防止像dessert=cheesecake&pancake 这样的东西破坏URL，或者将参数对象作为数据传递给ajax 函数，jquery 将进行编码在内部为您服务

jQuery.ajax({
    url: "handler.php",
    data: {
              appetizer: $("#appetizer").val(),
              entree: $("#entree").val(),
              dessert: $("#dessert").val()
           },
      type: "POST",
      success: function(data) {
              $("#form_content").html(data);
          },
      error: function() {}
});

【讨论】：

【解决方案2】：

用逗号分隔变量。在 jQuery.ajax 中，这样做：

 jQuery.ajax({
        url: "handler.php",
        data: "appetizer=" + $("#appetizer").val(),
              "entree=" + $("#entree").val(),
              "dessert=" + $("#dessert").val(),
              type: "POST",
              success: function(data) {
                  $("#form_content").html(data);
              },
              error: function() {}
    });

【讨论】：