PHP + JAVASCRIPT保存数据

时间:2014-06-18 23:23:40

标签: php jquery json

这是控制器:

 public function routeupdateAction() {
    $iRoute = IV_Http_Base::getParameter( 'id', IV_Http_Base::HTTP_POST );
    $sPath = IV_Http_Base::getParameter( 'path', IV_Http_Base::HTTP_POST );
    $sModule = IV_Http_Base::getParameter( 'module', IV_Http_Base::HTTP_POST );
    $sController = IV_Http_Base::getParameter( 'controller', IV_Http_Base::HTTP_POST );
    $sAction = IV_Http_Base::getParameter( 'action', IV_Http_Base::HTTP_POST );
    $iAccessRole = IV_Http_Base::getParameter( 'accessRole', IV_Http_Base::HTTP_POST );
    $iRoleCompareOperator = IV_Http_Base::getParameter( 'roleCompareOperator', IV_Http_Base::HTTP_POST );

    $oRoute = Default_Model_RouteEntity::getInstanceById( $iRoute );
    if( is_object( $oRoute ) && $oRoute instanceof Default_Model_RouteEntity ) {
        $oRoute->setPath( $sPath );
        $oRoute->setModule( $sModule );
        $oRoute->setController( $sController );
        $oRoute->setAction( $sAction );
        $oRoute->setAccessRole($iAccessRole);
        $oRoute->setRoleCompareOperator($iRoleCompareOperator);
        $oRoute->save();

        $aReturn = array( 'valid' => 'true' );
    } else  {
        $aReturn = array( 'valid' => 'false' );
    }
        echo json_encode( $aReturn );
    }
}

route.js文件

var ROUTE = new function () {
    var oGlobal = this;
    this.sSaveUrl = '';

    this.setSaveUrl = function (_sUrl) {
        this.sSaveUrl = _sUrl;
    }

    this.setEventSubmit = function () {
        $('[id^="route_update"]').each(function () {
            $(this).click(function () {
                var oData = $(this).closest('tr').find('input').serializeArray();
                console.log(oData);

                oReq = $.post(oGlobal.sSaveUrl, oData, function (data) {
                    if (data['valid'] != "true") {
                        //console.log('error');
                        //Fade in
                        $('#comment').html('Insert Success').fadeIn(1000);
                        //Fade out
                        setTimeout(function () {
                            $('#comment').html('').fadeOut(1000);
                        }, 1500);
                        //fade in
                        $('#comment')
                    } else {
                        // console.log('success');
                        //Fade in
                        $('#comment').html('Insert Success').fadeIn(1000);
                        //Fade out
                        setTimeout(function () {
                            $('#comment').html('').fadeOut(1000);
                        }, 1500);
                        //fade in
                        $('#comment')
                    }
                    return false;
                }, 'json');

                return false;
            });
        });
    }

    this.init = function () {
        this.setEventSubmit();
    }
}

和html标记

<form class="form-inline" role="form">
      <form class="well form-inline">
<table class="table table-bordered" width="100%">
    <tr>
        <th width="13%">Path</th>
        <th width="13%">Module</th>
        <th width="13%">Controller</th>
        <th width="13%">Action</th>
        <th width="13%">Access Role</th>
        <th width="13%">Compare Operator</th>
        <th width="9%">Submit</th>
    </tr>
    <?
    $aRoutes = $this->getValue('aRoutes');
    if( count($aRoutes) == 0 ) {
        ?>
        <tr>
            <td colspan="7">No routes found!</td>
        </tr>
    <?
    } else {
        /**
         * @var Default_Model_RouteEntity $oRoute
         */
        foreach ( $aRoutes as $oRoute) {
            ?>
            <tr>
                <td width="13%">
                    <input type="text" name="path" value="<?= $oRoute->getPath(); ?>"/>
                </td>
                <td width="13%">
                    <input type="text" value="<?= $oRoute->getModule(); ?>"/>
                </td>
                <td width="13%">
                    <input type="text" value="<?= $oRoute->getController(); ?>"/>
                </td>
                <td width="13%">
                    <input type="text" value="<?= $oRoute->getAction(); ?>"/>
                </td>
                <td width="13%">
                    <input type="text" class="form-actions" value="<?= $oRoute->getAccessRole(); ?>"/>
                </td>
                <td width="13%">
                    <input type="text" value="<?= $oRoute->getRoleCompareOperator(); ?>"/>
                </td>
                <td width="9%">
                    <input type="hidden" name="id" value="<?= $oRoute->getId(); ?>" />
                    <button type="button" class="btn btn-default btn-sm" id="route_update">Edit</button>
                    <div id="comment"></div>
                </td>
            </tr>
        <?
        }
    } ?>
</table>
      </form>
</form>
<? $this->addJs('admin/cms/route'); ?>
<script type="text/javascript">
    $(document).ready(function () {
        ROUTE.setSaveUrl('<?=IV_Url_Base::url( 'admin_cms_routeupdate' ); ?>');
        ROUTE.init();
    });
</script>

我的要求是,正如您所看到的那样基本功能已经准备就绪......现在我需要实现的是在更改行时保存数据。

这应该在js中需要,而不是多次刷新页面,如果数据保存正确,你有一个淡入淡出显示正确的保存..

如果更改行,如何保存数据?

1 个答案:

答案 0 :(得分:1)

  1. 删除“表单”标记。
  2. 使用jQuery在按钮上设置onclick事件。
  3. 使用parent('tr')parent)检索行元素。
  4. 使用行元素使用each来迭代td代码并将数据保存到某个数组:$('td', $row).each(function () { /* parse td element */ });
  5. 使用AJAX将数组发送到PHP脚本。
  6. 使用status codes将数据保存在PHP脚本中并将结果显示给AJAX(200 - OK,4 ** - ERROR)
  7. 如果一切正常,请使用jQuery来制作您想要的动画。