将文本块添加到 MySQL 数据库

Question

我正在尝试将文本块添加到 MySQL 数据库。以下是我的 HTML 代码的 sn-p：

    <div class="margins3">
    <h1>Meal Plan...</h1>
    <div id='results-container'>
    <div class='LeanMuscle Vegetarian NonBackLoadDayCBL MinimalCooking'><b>Meal 1: Accelerator Shake</b><br>
    1/2 scoop whey protein, 2 tsps coffee, 2 tbsps coconut oil<br>
    10g protein, 0g carbohydrates, 30g fat = 310 calories<br>

    <b>Meal 2: Tofu Salad</b><br>
    1 can tofu, 1tbsp olive oil, handful of salad leaves<br>
    30g protein, 0g carbohydrates, 7g fat = 183 calories<br>

    <b>Meal 3: Quorn Broccoli</b><br>
    1 bag of Quorn cubes, broccoli florets<br>
    30g protein, 0g carbohydrates, 5g fat = 165 calories<br> 

    <b>Meal 4: Pre-workout Ignition Formula Shake</b><br>
    1/2 scoop whey protein, 2 tsps coffee, 2 tbsps coconut oil<br>
    10g protein, 0g carbohydrates, 30g fat = 310 calories<br> 

    <b>Meal 5: Post-workout Hypertrophic Potentiator Shake</b><br>
    2 scoops whey protein, 5ml creatine, 5g leucine, 1 ripe banana<br>
    40g protein, 25g carbohydrates, 0g fat = 260 calories <br>

    <b>Meal 6, 7, and/or 8: Non-Back-Load Meals</b><br>
    Anything consisting of meals 2 and 3. Other options include egg whites, soya, cottage cheese, or other cheeses.
</div>
<div class='FatLoss NoRequirements BackLoadDayCBL ModerateCooking'><b>Meal 1: Accelerator Shake</b><br>
    1/2 scoop whey protein, 2 tsps coffee, 2 tbsps coconut oil<br>
    10g protein, 0g carbohydrates, 30g fat = 310 calories<br>

    <b>Meal 2: Tuna Salad</b><br>
    1 can tuna, 1tbsp olive oil, handful of salad leaves<br>
    30g protein, 0g carbohydrates, 7g fat = 183 calories<br>

    <b>Meal 3: Chicken Broccoli</b><br>
    1 chicken breast, broccoli florets<br>
    30g protein, 0g carbohydrates, 5g fat = 165 calories<br> 

    <b>Meal 4: Pre-workout Ignition Formula Shake</b><br>
    1/2 scoop whey protein, 2 tsps coffee, 2 tbsps coconut oil<br>
    10g protein, 0g carbohydrates, 30g fat = 310 calories<br> 

    <b>Meal 5: Post-workout Hypertrophic Potentiator Shake</b><br>
    2 scoops whey protein, 5ml creatine, 5g leucine, 1 ripe banana<br>
    40g protein, 25g carbohydrates, 0g fat = 260 calories <br>

    <b>Meal 6, 7, and/or 8: Back-Load</b><br>
    Anything consisting of starchy and/or sugary carbohydrates (fast-digesting, high GI)
    No need to calorie count, but try to keep an eye out for the amount of carbs you are ingesting, just so you can tweak your meals based on your visible results
    </div>
    </div>
    </div>

代码可能没有意义，但这里发生的情况是，我的 HTML 页面正在根据用户在四个下拉列表中选择的选项生成膳食计划。例如，如果您查看第一个膳食计划，您会看到它的 div 类由串联的字符串组成：'LeanMuscle Vegetarian NonBackLoadDayCBL MinimalCooking'。这些字符串中的每一个都是来自四个下拉列表之一的选项，如果选择了这组特定的选项，则以下膳食计划将加载到屏幕上。这成功了。

我现在要做的是将生成的膳食计划存储到我的 SQL 数据库的 members 表中。我在 members 表中提供了一个 mealPlan 字段，因此如果用户单击 save，我希望它包含所选的膳食计划按钮。以下是我应该在用户单击保存按钮时生成的 PHP 脚本：

<?php

//define database

define('DB_HOST', 'localhost');
define('DB_NAME', 'test');
define('DB_USER','root');
define('DB_PASSWORD','root');

//connect to the database

$con=mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or die("Failed to connect to MySQL: " . mysql_error());
$db=mysql_select_db(DB_NAME,$con) or die("Failed to connect to MySQL: " . mysql_error());

//function to save a meal plan

function SaveMealPlan()
{
$mealplan = $_POST['results-container']; //this is the class id that encapsulates all meal plans in the HTML file
$query = "INSERT INTO members (mealPlan) VALUES ('$mealplan')";
mysql_query($query);
echo "Successfully Added. Please press back on your browser.";
}

//if the user presses save, this script generates the SaveMealPlan() function

if(isset($_POST['submit']))
{
SaveMealPlan();
}
?>

如果您发现任何新手错误，请原谅我，我对此很陌生。按照我的逻辑，这段代码应该是做我想做的事情的基础，尽管我不确定一件事：

• 我是否在我的 PHP 脚本中引用 'results-container'？不像 传统上引用表单名称，我引用 div id，如 没有形式。这可行吗？如果不允许这样做，我应该 在用餐计划顶部添加<div name="mealPlan">，然后参考 我的 PHP 脚本中的 div 名称？

• 如果这确实有效，我只希望系统存储选择的餐点 计划。在我看来，使用 'results-container' 会存储 both 显示的膳食计划，这不好。我无法确定仅存储所选计划的方法。

• 我的保存按钮是否需要<form method="POST" action="savemealplan.php">？我确定我这样做（因为我正在发布数据并重定向到我的 PHP 脚本），但我没有使用表单，因此我不太确定这段代码是否相关？再次为菜鸟问题道歉。

抱歉，这是让我的系统正常工作的最后步骤之一，如果你们中的任何人能指导我走向正确的道路或提供解决方案，我将不胜感激。这看起来很简单，但事实证明，存储动态生成的文本而不是表单中输入的值是一项更艰巨的任务。

非常感谢您的宝贵时间。

Answer 1

有很多基于ajax 的示例和问题，并且它们也得到了回答，我只是在这里提供一个快速的基础供您处理，

更新：

您的 HTML + Javascript：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#saveButtonClick').on('click', function(){
            var dataToBeInserted = $('#meal1').text();
            $.ajax({
                    type: "POST",
                    url: insertDataToDB.php,
                    data:{'dataToBePass': dataToBeInserted},
                    success:function(results){   
                        //alert is ssuccess
                        alert('data is successfully inserted');
                    }
            });
    });
});

</script>
<div class="margins3">
    <h1>Meal Plan...</h1>
    <div id='results-container'>
        <div id="meal1" class='LeanMuscle Vegetarian NonBackLoadDayCBL MinimalCooking'><b>Meal 1: Accelerator Shake</b><br>
            1/2 scoop whey protein, 2 tsps coffee, 2 tbsps coconut oil<br>
            10g protein, 0g carbohydrates, 30g fat = 310 calories<br>

            <b>Meal 2: Tofu Salad</b><br>
            1 can tofu, 1tbsp olive oil, handful of salad leaves<br>
            30g protein, 0g carbohydrates, 7g fat = 183 calories<br>

            <b>Meal 3: Quorn Broccoli</b><br>
            1 bag of Quorn cubes, broccoli florets<br>
            30g protein, 0g carbohydrates, 5g fat = 165 calories<br> 

            <b>Meal 4: Pre-workout Ignition Formula Shake</b><br>
            1/2 scoop whey protein, 2 tsps coffee, 2 tbsps coconut oil<br>
            10g protein, 0g carbohydrates, 30g fat = 310 calories<br> 

            <b>Meal 5: Post-workout Hypertrophic Potentiator Shake</b><br>
            2 scoops whey protein, 5ml creatine, 5g leucine, 1 ripe banana<br>
            40g protein, 25g carbohydrates, 0g fat = 260 calories <br>

            <b>Meal 6, 7, and/or 8: Non-Back-Load Meals</b><br>
            Anything consisting of meals 2 and 3. Other options include egg whites, soya, cottage cheese, or other cheeses.
        </div>
        <input type="button" value="save" id="saveButton">
    </div>
 </div>

现在你准备好将所有餐点的data 传递到你的 php 文件中，我使用的 php 文件名为 insertDataToDB.php，使用你的代码；

PHP：

<?php

//define database

define('DB_HOST', 'localhost');
define('DB_NAME', 'test');
define('DB_USER','root');
define('DB_PASSWORD','root');

//connect to the database

$con=mysql_connect(DB_HOST,DB_USER,DB_PASSWORD) or die("Failed to connect to MySQL: " . mysql_error());
$db=mysql_select_db(DB_NAME,$con) or die("Failed to connect to MySQL: " . mysql_error());

$mealplan = $_POST['dataToBePass']; //the data you've attain from ajax

//your query
$query = "INSERT INTO members (mealPlan) VALUES ('$mealplan')";
if(mysql_query($query)){
   echo "Successfully Added. Please press back on your browser.";
}

?>

Answer 2

我是否在我的 PHP 脚本中引用了“结果容器”？与传统上引用表单名称不同，我引用的是 div id，因为没有表单。这可行吗？如果不允许这样做，我应该在膳食计划的顶部添加，然后在我的 PHP 脚本中引用 div 名称吗？

不，您无法访问 PHP 脚本中的非表单元素。更好的方法可能是隐藏输入元素，当用户单击提交时，让 JavaScript onSubmit 处理程序将该隐藏输入的内容更改为 div 的内容。例如：Get value from div. 阅读@paislee 的回答，因为我不推荐使用 jQuery。

如果这确实有效，我只希望系统存储选择的膳食计划。在我看来，使用“结果容器”会存储显示的两个用餐计划，这不好。我无法确定仅存储所选计划的方法。

您可以有一个 if 语句来决定用户选择了哪个选项，例如，您有以下 HTML 表单：

<form method="post" action="handle.php">
    <select name="meal_plan">
         <option value="good_meal">Good Meal</option>
         <option value="very_good_meal">Very Good Meal</option>
    </select>
    <input type="submit" value="Save" />
</form>

现在，PHP 来决定选择哪种形式：

<?php
    if ($_POST["meal_plan"] == "good_meal") {
        echo [The good meal div]  // you get this from doing a sql query
    } else {
        echo [The very good meal div]
    }
?>

我需要保存按钮吗？我确定我这样做（因为我正在发布数据并重定向到我的 PHP 脚本），但我没有使用表单，因此我不太确定这段代码是否相关？再次为菜鸟问题道歉。

是的，您需要在表单中添加输入按钮，如上面的 HTML 代码所示。

对不起，如果我没有太多帮助。你的问题对我来说似乎有点模糊，我无法理解它，希望这对我有所帮助。