javascript - 使用 ajax 响应检查复选框

Question

我有 HTML 复选框，我正在尝试使用作为 ajax 响应收到的脚本来检查它。 这是我的 HTML:

<form class="form-vertical sms-settings-form">
    <div class="form-group">
        <div data-toggle="tooltip" title="SMS to the customer at the time of sale." class="form-group opt-transport">
               <label for="sale-sms">Sale SMS</label>
               <input type="checkbox" id="sale-sms" data-toggle="toggle" data-on="Send" data-off="Don't Sent">
         </div>
        <textarea data-toggle="tooltip" class="form-control" id="sale-sms-content"></textarea>
    </div>

    <button type="button" class="btn btn-success sms-settings-btn">Save Settings</button>
</form>

这是我的 AJAX 请求。

$(document).ready(function(){
    $.post("ajax-req-handler.php", {key: "load-saved-settings"}, function(data){ $(".exec-ajax-script").html(data); });
});

这是我的ajax-req-handler.php

$sql = "SELECT * FROM settings";
$result = $conn->query($sql);
if(num_rows($result)>0){
    while($row=$result->fetch_assoc()){
        $id = $row['id'];
        $setting_name = $row['name'];
        if($id == 1 && $setting_name == 'sale-sms') $sms_content = $row['value'];
        if($id == 2 && $setting_name == 'send-sms') $send_sms = $row['value'];

    }
} ?>
<script type="text/javascript">
    $(document).ready(function(){
        $(".sms-settings-form #sale-sms").prop(<?php echo ($send_sms == 1) ? "'checked', 'checked'" : ""; ?>);
        $(".sms-settings-form textarea").val("<?php echo $sms_content; ?>");
    });

</script> <?php

这是我作为 AJAX 响应获得的代码

<script type="text/javascript">
    $(document).ready(function(){
        $(".sms-settings-form #sale-sms").prop('checked', 'checked');
        $(".sms-settings-form textarea").val("Hello [name], Your mobile number is [mobile]. your total amount is Rs. [total] out of which you paid Rs. [paid] and your due amount is [due] for the bill number # [bill] on [date] ");
    });

</script> 

响应似乎正常，但仍然没有将我的复选框的值设置为已选中。我尝试复制响应并粘贴到我的第一个文件中(定义复选框并启动 ajax 请求的文件)。它在那里工作。问题仅在于 ajax 响应

Answer 1

未经测试，但将所有代码放在 Javascript 中，而不是将其注入(inject) HTML dom。

$.ajax( {
  url: 'ajax-req-handler.php',
  data: { key: 'load-saved-settings' },
  dataType: 'json'
} ).done( function( data ) {

  if( data.send_sms === 1 ) {
    $(".sms-settings-form #sale-sms").prop('checked', true);
  }

  $(".sms-settings-form textarea").val( data.textarea );

} );

对于 PHP；而是做。

$sql = "SELECT * FROM settings";
$result = $conn->query($sql);
if(num_rows($result)>0){
  while($row=$result->fetch_assoc()){
      $id = $row['id'];
      $setting_name = $row['name'];
      if($id == 1 && $setting_name == 'sale-sms') $sms_content = $row['value'];
      if($id == 2 && $setting_name == 'send-sms') $send_sms = $row['value'];

  }
}

echo json_encode( array(
  'send_sms' => $send_sms,
  'textarea' => $sms_content
) );