douchuifk90315
2017-06-23 06:40
浏览 179
已采纳

使用.html()不显示JSON数据

Before posting this question, I did search here and got different answers and I think it doesn't fit to my needs. I have a button when clicked, the following js script will run

$("#update-details-btn").on('click', function() {
        $.ajax({
            type: 'post',
            dataType: 'json',
            data: "confirmation="+get_data,
            url: '../for_update_details',
            success: function(data)
            {
                console.log(data);
                $('div#update_details_body').html(data.results);

and this is the container

<div id="update_details_body" class="modal-body"></div>

the data comes from a php function

$data['results'] = NULL;
 $results = "<div class='form-group'>";
 $results .= "<label for='document-type' class='col-sm-4 control-label'>Category</label>";
 $results .= "</div>";
 $data['results'] = $results;
 echo json_encode($data);

As you can see from the js, I did a console.log which prints exactly what the data.results contain but when I use .html() to put inside the container, nothing happens. What could be the culprit here? I am doing this coding to other functions but only this section is not working

图片转代码服务由CSDN问答提供 功能建议

在发布此问题之前,我在这里搜索并获得了不同的答案,我认为它不符合我的需要 。 单击时我有一个按钮,下面的js脚本将运行

  $(“#update-details-btn”)。on('click',function(){\  n $ .ajax({
 type:'post',
 dataType:'json',
 data:“confirmation =”+ get_data,
 url:'.. / for_update_details',
成功:function( 数据)
 {
 console.log(data); 
 $('div#update_details_body')。html(data.results); 
   
 
 

和 这是容器

 &lt; div id =“update_details_body”class =“modal-body”&gt;&lt; / div&gt; 
    
 
 

数据来自php函数

  $ data ['results'] = NULL; 
 $ results =“&lt; div class ='  form-group'&gt;“; 
 $ results。=”&lt; label for ='document-type'class ='col-sm-4 control-label'&gt; Category&lt; / label&gt;“; 
 $ results  。=“&lt; / div&gt;”; 
 $ data ['results'] = $ results; 
 echo json_encode($ data); 
   
 
 

As 你可以从js看到,我做了一个打印的console.log 正是data.results包含的内容,但是当我使用.html()放入容器时,没有任何反应。 这可能是罪魁祸首? 我正在对其他函数执行此编码,但只有此部分不起作用

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

4条回答 默认 最新

  • dtlrp119999 2017-06-23 09:31
    已采纳

    Code :

    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $("#update-details-btn").on('click', function() {
            alert("inside");
            $.ajax({
                type: 'post',
                dataType: 'json',
                url: 'php_file.php',
                success: function(data)
                {
                    console.log(data);
                    $('div#update_details_body').html(data.results);
                }
            });
        });
    });
    </script>
    </head>
    <style>
    .modal-body
    {
        margin: 0px;
        padding: 0px;
        width: 100px;
        height: 100px;
    }
    </style>
    <body>
    <div id="update_details_body" class="modal-body"></div>
    <input type="button" id="update-details-btn" name="button" value="button">
    </body>
    </html>
    

    php code not chnage

    已采纳该答案
    评论
    解决 无用
    打赏 举报
  • douhong1703 2017-06-23 06:43
    var data = $.parseJSON(data);
    

    Add this in success funtion. Hope it help!

    评论
    解决 无用
    打赏 举报
  • dtw52353 2017-06-23 06:44

    From your example I tink you dont need to parse data into json. simply echo $results and bind in ajax success

    $("#update-details-btn").on('click', function() {
            $.ajax({
                type: 'post',
    
                data: "confirmation="+get_data,
                url: '../for_update_details',
                success: function(data)
                {
                    console.log(data);
                    $('div#update_details_body').html(data);
    

    PHP:

    $data['results'] = NULL;
     $results = "<div class='form-group'>";
     $results .= "<label for='document-type' class='col-sm-4 control-label'>Category</label>";
     $results .= "</div>";
    echo $results;
    
    评论
    解决 无用
    打赏 举报
  • dsdvr06648 2017-06-23 08:25

    Add the following line before the echo json_encode:

    header('Content-Type: application/json');
    echo json_encode($data);
    
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题