如何使用Ajax在变更事件上获取数据并自动填写表单

2020-02-20 php jquery ajax

我需要的

当有人更改日历时,我需要一个php脚本在后台运行并获取一些数据,并将其相应地显示在表单字段中。为此,我具有以下HTML代码和Ajax脚本

$("#normalShiftDate").change(function() {
  var FD = new FormData($('#dailyEditor')[0]);
  $.ajax({
    type: "POST",
    url: "supervisorEditAjax.php",
    processData: false,
    contentType: false,
    data: FD,
    success: function(result) {
      $('#normalShiftOperator').val(result["normalShiftOa"]);
      $("#normalShiftOperatorDuration").val(result["normalShiftOperatorDuration"]);
      $("#normalShiftPinCount").val(result["normalShiftPinCount"]);
    },
    error: function() {
      alert('Some error occurred!');
    }
  });
});
<div class="form-group">
  <div class="row">
    <div class="col-sm text-center" id="normalShiftOaDiv" class="">
      <label for="currentOa">Current OA?</label><br>
      <input type="radio" name="currentOa" id="normalShiftOa" value="normalShiftOa">
    </div>
    <div class="col-sm" id="normalShiftOperatorNameDiv">
      <label for="normalShiftOperator">Normal Shift</label>
      <select class="form-control" id="normalShiftOperator" name="normalShiftOperator">
        <option></option>
        <option>A</option>
        <option>B</option>
      </select>
    </div>
    <div class="col-sm" id="normalShiftOperatorDurationDiv">
      <label for="normalShiftOperatorDuration">Duration</label>
      <select class="form-control" id="normalShiftOperatorDuration" name="normalShiftOperatorDuration">
        <option></option>
        <option>1</option>
        <option>2</option>
      </select>
    </div>
    <div class="col-sm">
      <label for="normalShiftPinCount">Pin Count</label>
      <input type="number" class="form-control" id="normalShiftPinCount" name="normalShiftPinCount" value="23">
    </div>
    <div class="col-sm">
      <label for="normalShiftDate">Date</label>
      <input type="date" class="form-control" id="normalShiftDate" name="normalShiftDate">
    </div>
    <div class="col-sm">
      <button type="submit" class="btn btn-primary" style="margin-top: 30px;" id="normalShiftUpdate" name="normalShiftUpdate">Update</button>
    </div>
  </div>
</div>

我想说明的PHP变量$normalShiftOa$normalShiftOperatorDuration$normalShiftPinCount与ID表单字段normalShiftOperatornormalShiftOperatorDurationnormalShiftPinCount分别有人改变日历时。请参阅supervisorEditAjax.php的内容。如何在三个id字段中显示这三个变量?

我只知道如何显示一个字段。但是,如果要在多个字段中显示多个值,我们该怎么做?

有人可以帮忙吗?

编辑1

supervisorEditAjax.php内容

<?php
$normalShiftOa = "A";
$normalShiftOperatorDuration = "2";
$normalShiftPinCount = "100";
$arr = array('normalShiftOa' => $normalShiftOa, 'normalShiftOperatorDuration' => $normalShiftOperatorDuration, 'normalShiftPinCount' => $normalShiftPinCount);
echo json_encode($arr);?>

我试图使用一些Json方法。但这不起作用

Answers

经过多次尝试和错误,我可以在相应的表单字段中显示它。问题出在Ajax部分。基本上,我需要解析Json对象以获得特定值。如下替换AJAX代码,即可正常工作

< script >
  $("#normalShiftDate").change(function() {
    var FD = new FormData($('#dailyEditor')[0]);
    $.ajax({
      type: "POST",
      url: "supervisorEditAjax.php",
      processData: false,
      contentType: false,
      data: FD,
      success: function(result) {
        var returnedData = JSON.parse(result); //This is the change done to the code
        $('#normalShiftOperator').val(returnedData["normalShiftOa"]);
        $("#normalShiftOperatorDuration").val(returnedData["normalShiftOperatorDuration"]);
        $("#normalShiftPinCount").val(returnedData["normalShiftPinCount"]);
      },
      error: function() {
        alert('Some error occurred!');
      }
    });
  }); 
</script>

在此处阅读有关JSON.parse的更多信息

Related