javascript - JS中添加一行时PHP与JS的通信

Question

我有一个php代码如下所示:

PHP代码:

<?php     
$output['house_sitting_date_yes_no']=$_POST['house_sitting_date_yes_no'];

if(file_exists('../feeds/ptp-ess_landing_house.json')){
    $data = json_decode(file_get_contents('../feeds/ptp-ess_landing_house.json'));
}
?>

<?php if($data) { ?>
<form>
    <!-- Sitting Days START -->
    <div class="sitting-days" style="display:flex; justify-content:center; margin-bottom:20px;">
        <!-- Yes/No START -->
        <div class="yes-no">
            <h4 style="text-align:center;">Yes/No</h4>
            <select name="house_sitting_date_yes_no" id="house-yes-no" style="height:24px;">
                <option value="nada" <?php if($data->{"house_sitting_date_yes_no"}=="nada"){echo 'selected';}?>>Please choose an option</option>
                <option value="yes" <?php if($data->{"house_sitting_date_yes_no"}=="yes"){echo 'selected';} ?>>Yes</option>
            </select>
        </div>
        <!-- Yes/No END -->
    </div>
    <!-- Sitting Days END -->
</form>
<? } else {
echo 'Cannot read JSON settings file';
}
?>

上面的php代码对应下面的fiddle .在 fiddle 中，它在单击 Javascript 中的按钮时添加了一个新行。我没有在上面的 php 代码中包含 JS 代码。

添加新行 按钮让我们可以添加任意数量的行。添加后我们可以在输入框中输入是，然后保存。

问题陈述:

我现在面临一个问题。当我添加新行时，表单确实得到保存，但新添加的行被删除，只留下一行(日期和是/否)。

我想知道我应该在上面的 php 代码中做些什么更改，这样当我们添加新行时，它应该有一些与之关联的值，这样当我们保存表单时，新添加的行应该保留那里有他们各自的值(value)观。

当有一行时(当我不添加新行时)，所有内容都从 JSON 中提取并且它工作得很好。

Answer 1

您需要对 HTML、JS 和 PHP 进行一些更改才能使其正常工作。不需要从 JS 到 PHP 的通信。表单提交已经可以了，对吧？

修改name属性值。

因为您的代码中有多个 select 和 input 元素，所以您希望能够将这些元素的所有值发送到服务器。但是因为它们都具有相同的 name 属性值，您需要对这些值进行修改。

在名称末尾添加一个[]。这使 PHP 能够将每个 house_sitting_date_yes_no 作为数组读取。这意味着，在这种情况下，页面上的每个 select 字段值都将在全局 $_POST 变量中发送到服务器。

检查下面的示例。

<select name="house_sitting_date_yes_no[]">
  ...
</select>

名称末尾有[]，表示house_sitting_date_yes_no下会有多个值。

<?php
$_POST[ 'house_sitting_date_yes_no' ] // array( 'yes', 'no', 'nada' )
?>

在服务器端，您可以像往常一样访问这些值。但在这种情况下，它不是一个字符串，而是一个包含多个字符串的数组。每一个字符串，在这个例子中，选择字段。

一个ID只能使用一次。请改用类。

您的 newRow 函数创建一个新行。这是一种完美的方式，但该函数还输出带有 id 的元素。 ID 必须是唯一的，并且不能在页面上出现多次。

只要可以删除 id，请删除它们并改用类。或者让它们像它们应该的那样独一无二。

将值存储在 JSON 中

您已经开始使用这个打开和解码 JSON 文件的方法了。我假设您希望使用更多数据更新 JSON 而不是覆盖当前数据。

由于数据将存储在编码为 JSON 的关联数组中，因此可以使用 array_merge_recursive组合这些数组及其值。

合并这些值后，将数组编码回 JSON 并使用 file_put_contents 再次保存您的文件。

$output = array();
$output['house_sitting_date'] = $_POST['house_sitting_date'];
$output['house_sitting_date_yes_no'] = $_POST['house_sitting_date_yes_no'];

$file_url = '../feeds/ptp-ess_landing_house.json';

if (file_exists($file_url)) {

  // Get current file.
  $current_data = json_decode(file_get_contents($file_url));

  // Combine data if possible, or create a new data.
  if (is_array($current_data)) {
    $new_data = array_merge_recursive($current_data, $output);
  } else {
    $new_data = $output;
  }

  // Update the file with new data.
  $updated_data = json_encode($new_data);
  file_put_contents($file_url, $updated_data);
}

希望对您有所帮助。