以html格式添加ajax成功返回json对象数据

时间:2015-03-11 07:30:57

标签: javascript php jquery ajax json

我创建了用ajax在php-mysql数据库中添加数据的表单, 它工作正常,添加数据后显示在html表中。

现在我正在尝试创建用于编辑这些条目的代码, 我已经使用AJAX创建了如下代码,

$(document).ready(function() {
var table = $('#categorylist').DataTable();

$('#categorylist tbody').on( 'click', 'tr', function () {
    $(this).toggleClass('selected');
} );

$('#edit_category').on( 'click',function () {
    document.getElementById('editcategory').style.display = "block";



    /*do some task here to get values of ID*/
var catid = $("#cat_id").val();


            jQuery.ajax({
                        url: "<?php echo base_url(); ?>index.php/tools/edit_category",
                        data: {category:catid},
                        type: "POST",
                        success:function(data){ 
                        var objData = jQuery.parseJSON(data);
                            console.log(objData);
                            $("#cname").html(
                                objData.category_name
                                            );


                                    }
                        });

});
});

上面的代码会向PHP发送请求以获取该ID的信息并以json格式返回数据, 下面是返回的数据,

category_id:“38” category_name:“测试传送”

现在我想以html格式显示这些值,以便用户可以看到当前值是什么,然后用户将编辑值并单击“保存”。

下面是我的html表单,如何在html输入表单中显示类别ID和名称作为值?

谢谢,

<form action="" method="post" accept-charset="utf-8" id="category_editform">
                            <div class="form-group">

                              <div class="controls">
                              <div class="input-group m-t-20 icons-panel"> <span class="input-group-addon bg-white"> <i class="fa fa-list"></i> </span>
                         <input type="text" class="form-control" name="category_name" placeholder="category name" id="cname" required>
                        </div>

                              </div>
                            </div>
                            <div class="align-left">
                              <input type="submit" class="btn btn-primary m-r-20" name="create_category" value="Save">
                              <button type="reset" class="btn btn-default" onClick="expensecategory_editform_hide()">Cancel</button>
                            </div>

                          </form>

2 个答案:

答案 0 :(得分:5)

想象这是你的json

{'category_id': "38", 'category_name': "Test Conveyance"}

使用点表示法解析它。 防爆。如果它在ajax响应中使用data.category_iddata.category_name

然后

使用id将其设置为表单 防爆。你的领域是

<input type="text" id="category_id">

然后将类别ID的值分配给字段

$("#category_id").val(data.category_id);

在你的情况下你应该使用

$("#cname").val(objData.category_name);

答案 1 :(得分:1)

使用以下代码以html格式显示类别名称值

$("#cname").val(objData.category_name)

而不是

$("#cname").html(objData.category_name)