Question

我有一个使用bootstrap 3框架的页面，该框架有一个按钮，当按下该按钮时，使用ajax从另一个页面（mydata.php）收集数据，并在页面上的<div id="results">内回显它。代码工作正常，但只要我将<div class=\"col-xs-6\">添加到mydata.php，页面上就不会显示任何内容，尽管我可以在firebug中看到它。

如果我将$("#results").append(html);更改为$("#results").text(html); html回显到页面上，而是作为没有任何格式的文本。如果我从mypage.php中删除<div class=\"col-xs-6\">，则数据会按预期显示在页面上。为什么添加<div class=\"col-xs-6\">后，mydata.php中的数据不会显示？

<div class="container">
<div class="row">
 <div class="col-xs-12 col-centered">

 <div class="col-xs-8 col-md-3 col-lg-3">
<button type="submit" name="btn" value="search" id="myButton" class="search_button btn btn-small btn-default btn-pull-right">Press</button>
</button>
</div>

</div>
</div>

<div class="row">

<div id="results"><!--data displayed here-->
</div>

</div><!--Row-->
</div><!--Cont-->

的jQuery

$(document).ready(function(){

$(function() {
    $("#myButton").click(function() {
      var btn    = $("#myButton").val();
         var data            = 'btn='+ btn;
         // if location is not empty
        if(data) {
            // ajax call
            $.ajax({
                type: "POST",
                url: "mydata.php",
                data: data,
                success: function(html){

                    $("#results").append(html);
              }
            });    
        }
        return false;
    });
});
});

mydata.php看起来像这样：

<?php

if (isset($_POST['btn'])) {

echo "

 <div class=\"col-xs-6\">

<ul>
<li><h4>Data in this Div</h4></li>
</ul>
</div>

<div class=\"col-xs-6\">

<ul>
<li><h4>And Data in this Div</h4></li>
</ul>
</div>";

}
?>

Answer 1

如果你不添加jQuery库，那么包含它

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-centered">

            <div class="col-xs-8 col-md-3 col-lg-3">
                <button type="submit" name="btn" value="search" id="myButton"
                        class="search_button btn btn-small btn-default btn-pull-right">Press
                </button>
                </button>
            </div>

        </div>
    </div>

    <div class="row">

        <div id="results"><!--data displayed here-->
        </div>

    </div><!--Row-->
</div><!--Cont-->

<script>
    $(document).ready(function () {

        $(function () {
            $("#myButton").click(function () {
                var btn = $("#myButton").val();
                var data = 'btn=' + btn;
                // if location is not empty
                if (data) {
                    // ajax call
                    $.ajax({
                        type: "POST",
                        url: "http://localhost/edit.php", // your file path
                        data: data,
                        success: function (html) {
                            $("#results").append(html); // if you want to replace results div then change $("#results").html(html);
                        }
                    });
                }
                return false;
            });
        });
    });
</script>

它在我的身边工作得很好，我在当地测试了

这是输出：

Answer 2

删除ajax部分可以正常工作......您确定收到的确切HTML吗？

$('#result').append("<div class=\"col-xs-6\">"+
"<ul>"+
"<li><h4>Data in this Div</h4></li>"+
"</ul>"+
"</div>"+
""+
"<div class=\"col-xs-6\">"+
""+
"<ul>"+
"<li><h4>And Data in this Div</h4></li>"+
"</ul>"+
"</div>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result">

</div>

Answer 3

$('#myButton').on('click',function(){
  var form = jQuery("#form");
  $.ajax({
        url: 'mydata.php',
        type: 'POST',
        data:  form.serialize(),       
        cache: false,       
        dataType : 'json',
        success: function(data){
            if(data==true){               
                $("#results").append(data);
            }
    if(data==false){

            }
        },
        error: function(){
        }           
   });

    return false;

});

Div没有显示在jQuery Ajax调用中

3 个答案: