Javascript 如何在表单中发布ajax响应

我所做的 这是我的ajax调用，我使用以下方法获取复选框：

  <script>
      $(document).ready(function(){
        $("#place").change(function(){
            var id = $(this).val();
            alert(id);
         $.ajax({
            type: "GET",
            url: "getsubcat.php",
            data: "pass_id="+id,
            success: function( data ) {
                  alert(data);

                document.getElementById("show").innerHTML = data;
    //$('#show').html(data);



            }
        });
    });
    });
    </script>

以下是PHP代码：

<?php
include_once 'config.php';
 $get_id=$_GET['pass_id'];

$data = array();
$sql="SELECT * FROM `app_subcategory` where cat_id='".$get_id."' ";

          $check= mysqli_query($conn, $sql);
$output.='<div class="form-group text-muted well well-sm no-shadow">
<p class="help-block">Please check atleast one Category.</p>                     
                      <lable><b>Categories</b></lable><br>';

          while($resultcheck= mysqli_fetch_array($check,MYSQLI_ASSOC)){
 //$output .= ''.$resultcheck["subcategory_name"].'<input type="checkbox"  name="subcat" value="'.$resultcheck["id"].'" id="mycheckbox">';
  $output .= ' 
<div class="checkbox-inline">
                           <span style="margin-left:10px"></span><input name="subcat[]" value="'.$resultcheck["id"].'" type="checkbox" id="mycheckbox"><span>'.$resultcheck["subcategory_name"].'</span><span style="margin-left:10px"></span>
                      </div>';
}
  $otuput.='<br>

                  </div>
              </div>';    
print_r($output);
?>

我的要求：

我想使用表单add-place.php将此复选框数组结果发布到另一个页面，但当我单击“提交”按钮时，我没有在使用ajax显示的帖子中获得任何数据。我是ajax新手，请帮助我，并为错误的英语道歉

得到响应后的MyOutput

如果有其他方法，请指导我

这是我的地方代码

<?php  
$sql="SELECT * FROM `app_category` order by cat_id DESC ";

          $check= mysqli_query($conn, $sql);
          $resultcheck= mysqli_fetch_array($check,MYSQLI_BOTH);

 ?>

<select id="place" name="place"  class="selectpicker" data-live-search="true"  style="color: #fff;" title="Choose here..."id="place" required >
<option id="default">--Select Place--</option>
<?php foreach($check as $pageid){?>



<option value="<?php echo $pageid['cat_id'];?>" id="<?php echo $pageid['cat_id'];?>"><?php echo $pageid['category_name']; ?></option>



<?php } ?></select></br>
             <p class="help-block">Please check atleast one Category.</p>                     
                      <lable><b>All Sub Categories</b></lable><br>
                      <div id="show"></div>
</div>

---

确保您的show元素处于表单中，该表单假定已提交，并且您在提交之前选中了其中一个复选框

document.getElementByIdshow.innerHTML

尝试以下代码

所以我研究了一下你们的问题，发现一个未关闭的HTML元素会导致这样的问题，然后我检查了你们下面的代码，发现了一个额外的关闭div标记

参考：

说明理由可以 非常简单：格式错误的DOM。这可能导致正确的视觉效果 呈现，但在提交时无法正确处理表单输入

---

Ajax响应不会更新文档对象模型DOM，这就是为什么当您提交表单时，您将无法获得从Ajax响应中收到的元素值

下面的示例将创建元素并更新到页面DOM中，以便在提交表单时在POST请求中获得元素值

PHP脚本

Javascript

---

提供位置html pleasechange data:pass_id=+id，to data:{pass_id:id}，您对数据非常开放，应该真正使用，而不是连接查询。特别是因为你根本没有逃避用户的输入@AswinRamesh-两种方法都可以。但当我单击“提交表单”时，它在子类别POST arraythanks中显示空数据。先生，但我提交的表单处于模式，所有div标记都已正确关闭。现在仍然获得数据，任何错误都可以帮助我解决。我在“确保平衡”下找到了另一个额外数据。您是否已验证AJAX调用是否正确地将响应追加到id=show。@Jagdisharma检查添加的行$output=；在我的回答中。先生，我能把我的文件寄给你吗？这样我就能正确地理解问题了。我发现了一个拼写错误$otuput；略高于打印输出；

<?php
include_once 'config.php';
 $get_id=$_GET['pass_id'];

$data = array();
$sql="SELECT * FROM `app_subcategory` where cat_id='".$get_id."' ";

$check= mysqli_query($conn, $sql);

$output = ""; // <----------
// Added above line because php was generating:
// Notice: Undefined variable: output

$output.='
<div class="form-group text-muted well well-sm no-shadow">
    <p class="help-block">Please check atleast one Category.</p>                     
    <lable><b>Categories</b></lable><br>';

while($resultcheck= mysqli_fetch_array($check,MYSQLI_ASSOC)){
 //$output .= ''.$resultcheck["subcategory_name"].'<input type="checkbox"  name="subcat" value="'.$resultcheck["id"].'" id="mycheckbox">';
  $output .= ' 
    <div class="checkbox-inline">
        <span style="margin-left:10px"></span>
        <input name="subcat[]" value="'.$resultcheck["id"].'" type="checkbox" id="mycheckbox" />
        <span>'.$resultcheck["subcategory_name"].'</span>
        <span style="margin-left:10px"></span>
    </div>';
}
$output.='<br></div>'; 
// $otuput.='<br></div>';  //<------ TYPO
// Here was the extra </div>

print_r($output);
?>

<?php
include_once 'config.php';
$get_id=$_GET['pass_id'];
$data = array();
$sql="SELECT * FROM `app_subcategory` where cat_id='".$get_id."' ";
$check= mysqli_query($conn, $sql);
$ar= [];
while($resultcheck= mysqli_fetch_array($check,MYSQLI_ASSOC)){
    $ar[] = [
        'id' => $resultcheck["id"],
        'name' => $resultcheck["subcategory_name"],
    ];
}

echo json_encode($ar);
?>

<script>
      $(document).ready(function(){
        $("#place").change(function(){
        var id = $(this).val();
        alert(id);
        $.ajax({
            type: "GET",
            url: "getsubcat.php",
            data: {"pass_id":id},
            dataType: 'json',
            success: function( data ) {
                var show = document.getElementById("show");
                //var obj = [{id:'1',name:'chk1'},{id:'2',name:'chk2'}];
                var div = document.createElement("DIV");       
                div.setAttribute('class','form-group text-muted well well-sm no-shadow');       
                var p = document.createElement("P");
                p.setAttribute('class','help-block');
                var pt = document.createTextNode("Please check atleast one Category."); 
                var label = document.createElement('label');
                var b = document.createElement('B');
                var bt = document.createTextNode("Categories"); 
                b.appendChild(bt);
                label.appendChild(b);
                p.appendChild(pt);
                var div2 = document.createElement("DIV");
                div2.setAttribute('class','checkbox-inline');
                jQuery.each(data,function(k,v){
                  var span0 = document.createElement("span");
                  span0.setAttribute('style','margin-left:10px');
                  var span = document.createElement("span");
                  span.setAttribute('style','margin-left:10px');
                  var input = document.createElement("input");
                input.setAttribute('name','subcat[]');
                input.setAttribute('type','checkbox');
                input.setAttribute('id','mycheckbox');
                input.setAttribute('value',v.id);
                var span1 = document.createElement("span");
                var span1t = document.createTextNode(v.name);
                span1.appendChild(span1t);
                div2.appendChild(span0);
                div2.appendChild(input);
                div2.appendChild(span1);
                }); 

                div.appendChild(p);
                div.appendChild(label);
                div.appendChild(div2);
                show.appendChild(div);

            }
        });
    });
    });
</script>