thinkphp+Ajax 实现页面刷新不跳转提交

最新推荐文章于 2021-03-19 22:06:38 发布

cichana5555

最新推荐文章于 2021-03-19 22:06:38 发布

阅读量497

点赞数

文章标签： php json javascript ViewUI

原文链接：https://my.oschina.net/u/4003338/blog/2251961

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
</head>

<body>
<p>标题:</p><input type="text" name="title" id="titles" style="width: 100%; height: 20px;">

<div id="editor">
    <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>

<input type="radio" class="recom" name="identity" value="1" checked="checked">推荐
<input type="radio" class="recom" name="identity" value="0">不推荐

<button class="one" type="button">提交</button>
<br/>
<textarea id="contents" name="content" style="display: none;"></textarea>

<script src="/static/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="/static/js/wangEditor.min.js"></script>

<script type="text/javascript">
    var E = window.wangEditor;
    var editor = new E('#editor');

    var $text1 = $('#contents');
    editor.customConfig.onchange = function (html) {
        // 监控变化，同步更新到 textarea
        $text1.val(html)
    };

    editor.customConfig.debug = true;
    editor.customConfig.uploadFileName = 'image';                       //上传的文件名
    // 或者 var editor = new E( document.getElementById('editor') )
    editor.customConfig.uploadImgServer = "/hfback/after/uploads";  // 上传图片到服务器
    editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;         //图片的尺寸
    editor.customConfig.uploadImgMaxLength = 5;                     //最多上传多少
    editor.customConfig.uploadImgParams = {
        type: 'editor'  // 属性值会自动进行 encode ，此处无需 encode
    };
    editor.create();
    $text1.val(editor.txt.html())

    //点击提交按钮
    $(".one").click(addUser)

    function addUser() {
        var addhelp = {
            //要先获取标题 内容
            titles: $("#titles").val(),
            contents: $("#contents").val(),
            recommend: $("input[name='identity']:checked").val()
        };
        //提交内容到服务器
        $.ajax({
            url: "/hfback/After/present",
            data: addhelp,
            type: "post",
            dataType: "json",
                            //mgs 是返回的数据存储在mgs
            success: function (mgs) {
                //弹窗提示
                console.dir(mgs)
                
                // 提交是否成功 给个判断
                if (mgs["one"] == '1') {
                    alert('添加成功');
                } else {
                    alert('添加失败')
                }
            }
        })
    }
</script>
</body>
</html>

后台控制器方法，获取过来的值，插入数据库当中

public function present()
{
    $data =Request::only(["titles","contents","recommend"]);

    $values = [
        'title' => $data['titles'],
        'content' => $data['contents'],
        'recommend' => $data['recommend'],
        'time' => time()
    ];

    $validate = new addition;
    if (!$validate->check($values)) {
        $this->success(($validate->getError()), '/hfback/after/addition');
    }

    $aaa = Db::table('hf_help')
        ->insert($values);

    if($aaa == 1){
        return json(["one" => 1]);
    }else{
        return json(["one" => 2]);
    }
}

转载于:https://my.oschina.net/u/4003338/blog/2251961

cichana5555

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
thinkphp+Ajax 实现页面刷新不跳转提交

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>wangEditor demo</title></head>...
复制链接

扫一扫