JQuery在信息保存到数据库后将li添加到ul

我目前使用$.post将所有内容都工作/保存到数据库中，但我不确定如何在保存数据后不重新加载页面而显示新列表。我也试过$（document）.ready（），但也没有成功

<script>

saveBullet = function(action) {

    $.post('/ManufacturersProductsLinesFeatures/ajax_save/', {
        'data[ManufacturersProductsLinesFeature][bullet_point]':$('#ManufacturersProductsLinesFeatureBulletPoint').val(),
        'data[ManufacturersProductsLinesFeature][manufacturers_products_line_id]':$('#ManufacturersProductsLinesFeatureManufacturersProductsLineId').val(),
        'data[ManufacturersProductsLinesFeature][created_by]': <?=user('id')?>,
    },function() {
            //I've tried more than a couple things here.
        //$(this).closest('ul').append('<li>');
    });
}

</script>



<input type="button" value="Save Bullet" onClick="javascript: saveBullet();">


<div id="sortableDiv" width="100%">
        <?if (empty($this->data['ManufacturersProductsLinesFeature'])) : ?>
                There are no bullet points to display. &nbsp;Please add a bullet point.
        <? else : ?>    
            <ul id="list1"> 
                <? foreach ($this->data['ManufacturersProductsLinesFeature'] as $k => $v): ?>
                    <li id="ManufacturersProductsLinesFeature_<?=$v['id'];?>" style="border-bottom: solid 1px #d5d5d5;" class="special">
                        <table width="100%">
                            <tr>
                                <td width="25" align="left"><?=$html->image('/img/icons/arrow_switch.gif');?></td>
                                <td><?=$v['bullet_point'];?></td>
                                <td style="vertical-align: middle;" vAlign="middle" align="right">
                                    <a href="<?=$html->url('/ManufacturersProductsLinesFeatures/edit/'.$product_type_id.'/'.$v['manufacturers_products_line_id'].'/'.$v['id']);?>"><img src="<?=$html->url('/img/icons/pencil.gif')?>" /></a>
                                    <?= $html->link($html->image('icons/bin_empty.gif'), array('action'=>'../ManufacturersProductsLinesFeatures/delete_feature/', 'id'=>$product_type_id.'/'.$v['manufacturers_products_line_id'].'/'.$v['id']), null, "Are you sure?", false); ?>  
                                </td>
                            </tr>
                        </table>
                    </li>
                <?endforeach; ?>    
            </ul>
        <?endif; ?>     
    </div>

saveBullet=函数（操作）{
$.post（'/manufacturersProductsLineFeatures/ajax_save/'{
“数据[ManufacturersProductsLineFeature][bullet_point]：$（“#ManufacturersProductsLineFeatureBulletPoint”）.val（），
“数据[ManufacturersProductsLineFeature][manufacturers_products_line_id]：$（“#ManufacturersProductsLineFeatureManufacturersProductsLineId”）.val（），
“数据[ManufacturersProductsLineFeature][created_by]”：，
}，函数（）{
//我在这里试过很多东西。
//$（this）.closest（'ul'）.append（'li>'）；
});
}
没有要显示的项目符号。请添加一个要点。

,
}，函数（）{
$（“
列表”+i+”
）。附录（'ul#list1'）；
i++；
});
}

您需要连接按钮以实际执行ajax调用并添加li元素。（我没有真正检查你的saveBullet函数在做什么，我只是让它在点击按钮时被调用。）给按钮一个id，如下所示：

<input type="button" id="buttonSave" value="Save Bullet"/>

然后jQuery：

$(document).ready(function() {

  $('#buttonSave').click(function() {
      saveBullet('action_here');          
      return false;     // cancel default button click action
  });


  function saveBullet(action) {

    var i=$('ul#list1 li').size() + 1;

    $.post('/ManufacturersProductsLinesFeatures/ajax_save/', {
        'data[ManufacturersProductsLinesFeature][bullet_point]':$('#ManufacturersProductsLinesFeatureBulletPoint').val(),
        'data[ManufacturersProductsLinesFeature][manufacturers_products_line_id]':$('#ManufacturersProductsLinesFeatureManufacturersProductsLineId').val(),
        'data[ManufacturersProductsLinesFeature][created_by]': <?=user('id')?>,
      },
      function() {
        $('<li> List ' + i + '</li>').appendTo('ul#list1');
        i++;
      });

  }

});

$（文档）.ready（函数（）{
$（“#按钮保存”）。单击（函数（）{
saveBullet（“此处的动作”）；
返回false；//取消默认按钮单击操作
});
函数saveBullet（动作）{
变量i=$（'ul#list1 li'）.size（）+1；
$.post（'/manufacturersProductsLineFeatures/ajax_save/'{
“数据[ManufacturersProductsLineFeature][bullet_point]：$（“#ManufacturersProductsLineFeatureBulletPoint”）.val（），
“数据[ManufacturersProductsLineFeature][manufacturers_products_line_id]：$（“#ManufacturersProductsLineFeatureManufacturersProductsLineId”）.val（），
“数据[ManufacturersProductsLineFeature][created_by]”：，
},
函数（）{
$（“
列表”+i+”
）。附录（'ul#list1'）；
i++；
});
}
});

是否使用服务器返回的数据创建新列表项？

$(document).ready(function() {

  $('#buttonSave').click(function() {
      saveBullet('action_here');          
      return false;     // cancel default button click action
  });


  function saveBullet(action) {

    var i=$('ul#list1 li').size() + 1;

    $.post('/ManufacturersProductsLinesFeatures/ajax_save/', {
        'data[ManufacturersProductsLinesFeature][bullet_point]':$('#ManufacturersProductsLinesFeatureBulletPoint').val(),
        'data[ManufacturersProductsLinesFeature][manufacturers_products_line_id]':$('#ManufacturersProductsLinesFeatureManufacturersProductsLineId').val(),
        'data[ManufacturersProductsLinesFeature][created_by]': <?=user('id')?>,
      },
      function() {
        $('<li> List ' + i + '</li>').appendTo('ul#list1');
        i++;
      });

  }

});