Question

参考此Question 我最近开发了一个网页，允许以测验的形式创建过去的问题。只是想知道这段代码是否写得正确或是否有任何可能的完全调整。

<div class="container">
  <div class="col-md-4">
    <form method="POST" id="myform">
      <div class="form-group">
        <label for="title">Past Question Title</label>
        <input type="text" class="form-control" id="pqtitle" name="pqtitle" placeholder="Type Question Here" cols="40" rows="5" style="resize:vertical;" required>
      </div>
      <div class="form-group">
        <label for="course">Course Code</label>
        <select type="text" class="form-control" id="coursecode" name="coursecode" placeholder="Course"></select>
        <option></option>
      </div>
      <div id="fielda">
        <div id="fielda0">
          <!-- Text input-->
          <hr/>
          <fieldset>
            <legend>Question 1</legend>
            <div class="form-group">
              <label for="question1">Question</label>
              <textarea type="text" class="form-control" id="question1" name="question1" placeholder="Type Question Here" cols="40" rows="5" style="resize:vertical;" required></textarea>
            </div>
            <div class="form-group">
              <label for="nt">Upload Image</label>
              <input type="file" name="file" class="filestyle" data-iconName="glyphicon glyphicon-inbox">
            </div>
            <div class="form-group">
              <label for="options">Options</label>
              <div data-role="dynamic-fields">
                <div class="form-inline">
                  <div class="form-group">
                    <div class="col-md-12">
                      <input type="radio" name="answer1" id="answer1" value="Answer">Answer
                      <span>-</span>
                      <label class="sr-only" for="option1">Option</label>
                      <input type="text" class="form-control" id="option1" name="option1" placeholder="Type Option Here">
                    </div>
                  </div>
                  <button class="btn btn-danger" data-role="remove">
                    <span class="glyphicon glyphicon-remove"></span>
                  </button>
                  <button class="btn btn-primary" data-role="add">
                    <span class="glyphicon glyphicon-plus"></span>
                  </button>
                </div>
                <!-- /div.form-inline -->
              </div>
              <!-- /div[data-role="dynamic-fields"] -->
            </div>
            <div class="form-group">
              <label for="slug1">Slug</label>
              <textarea type="text" class="form-control" id="slug1" name="slug1" placeholder="Explain You Answer" cols="40" rows="5" style="resize:vertical;" required></textarea>
            </div>
            <div class="form-group">
              <label for="point1">Point</label>
              <input type="number" class="form-control" id="point1" name="point1" placeholder="Allocate Score Here" required>
              <hr/>
            </div>
          </fieldset>
        </div>
        <!--end field0-->
      </div>
      <!--end field-->

      <div class="form-group">
        <div class="col-dm-2 text-right">
          <button id="add-more" name="add-more" class="btn btn-primary">Add More</button>
          <button type="submit" class="btn btn-danger" name="submit">Submit</button>
        </div>
      </div>

    </form>
  </div>
</div>

已经编写了一个java脚本来动态生成字段和字段区域。但是如何在 JSON

中最好地返回结果

我故意不想使用SQL数据库

Answer 1

我同意@MagikalWizard。从字段/值对构建您的JSON，在您拥有完整的JSON数组对象后，我将触发ajax POST将数组传递到服务器端PHP页面：

$.ajax({
    type: 'POST',
    url: 'save_json_file.php',
    data: {'myjsondata': your_json_array},
    success: function(msg) {
      //alert(msg);  // you could show the response from the POST here to confirm completion / success.
    }
});

然后在PHP中检索POSTed JSON数据并使用file_put_contents将其保存到服务器：

$data_to_save = json_decode(file_get_contents('php://input'), true);
file_put_contents($data_to_save, 'newfilesaved.json');

注意：您可能需要URL编码入站JSON数据

更新：您可以使用

将表单数据作为JSON获取

$('form').serializeArray()

看一下这个例子我把fiddle example

放在一起

具有内部动态字段到JSON的动态HTML表单

1 个答案: