1:定义路由:

//租房
Route::resource('house','fang\FangattrController');

2:控制器访问前端框架:

 public function create()
{
//前端添加页面
return view('house.create');
}

3:HTML页面代码:

   <form class="form form-horizontal" id="form-article-add" >
<div class="row cl">
<label class="form-label col-xs-4 col-sm-3">是否顶级:</label>
<div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
<select class="select" size="1" name="pid" id="pid">
<option value="" selected>__请选择__</option>
<option value="1" selected>菜单</option>
<option value="0" selected>顶级</option>
</select>
</span> </div>
</div> <div class="row cl">
<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>字段名</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" value="" placeholder="" id="field_name" name="field_name">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2">属性名称:</label>
<div class="formControls col-xs-8 col-sm-9">
<input type="text" class="input-text" value="0" placeholder="" id="name" name="name">
</div>
</div>
<div class="row cl">
<label class="form-label col-xs-4 col-sm-2">图标:</label>
<div class="formControls col-xs-8 col-sm-9">
<div id="picker">上传文章封面</div>
</div>
<div class="formControls col-xs-4 col-sm-4">
<input type="hidden" value="{{ config('up.pic') }}" name="icon" id="icon"/>
<img src="{{ config('up.pic') }}" id="pic" name="icon" style="width: 50px;">
</div>
</div> <div class="row cl">
<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
<input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
</div>
</div>
</form>
<script type="text/javascript">
//表单验证通过发送ajax
$("#form-article-add").validate({
submitHandler:function(form){
//获取父级名称的值
var pid=$("#pid").val();
//获取图标的值
var icon=$("#icon").val();
//获取字段名的值
var field_name=$("#field_name").val();
//获取属性名称的值
var name=$("#name").val();
//传_token,防止报419错误
var _token="{{csrf_token()}}"
$.ajax({
//网址
url:"{{url('house')}}",
//发送的数据
data:{
field_name:field_name,
name:name,
_token:_token,
pid:pid,
icon:icon
},
//返回的数据类型
dataType:"JSON",
//发送的方式
type:'POST',
//返回结果
success:function (res){
if (res.code==200){
layer.msg(res.message, {icon: 1, time: 1000});
location.href='/house'; }else{
layer.msg(res.message, {icon: 5, time: 1000});
} }
})
} });
</script>

4:控制器代码:

    public function store(Request $request)
{
//接受ajax发过来的数据
$data=$request->except('_token');
// 添加入库
$res=Fangattr::insert($data);
// 返回三要素
if ($res!==false){
return ['code'=>200,'message'=>'添加成功','data'=>$data];
}
return ['code'=>500,'message'=>'添加失败','data'=>'']; }

laravel7 ajax H-ui框架添加数据至数据库的更多相关文章

  1. Jquery+Ajax实现Select动态添加数据

    https://blog.csdn.net/zhengxiangwen/article/details/46480687 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框 ...

  2. ThinkPHP 添加数据到数据库失败

    ThinkPHP 添加数据到数据库失败 一般情况下会先检查一下几个方面 检查控制器或Model名是否有误 检查需要插入的数据是否为空或者缺失参数 检查数据表名及字段名称(大部分下都是字段名有误出错的) ...

  3. 搭建Spring框架,实现添加数据到数据库

    原创链接:http://www.cnblogs.com/yanqin/p/5284400.html (允许转载,但请注明原创链接) 1.在myeclipse中建立一个web项目 项目名 :spring ...

  4. PHP---TP框架---添加数据-----有三种方式

    添加数据 添加数据有三种方式: 第一种: <?php namespace Home\Controller;//这个文件的命名空间 use Think\Controller;//use使用哪一个而 ...

  5. SpringBoot通过Ajax批量将excel中数据导入数据库

    Spring Boot通过Ajax上传Excel并将数据批量读取到数据库中 适合场景:需要通过excel表格批量向数据库中导入信息 操作流程 [1]前端上传一个excel表格 [2] 后端接收这个ex ...

  6. angular js 页面添加数据保存数据库

    一.编写实体类Controller层返回数据使用 package entity; import java.io.Serializable; public class Result implements ...

  7. 使用T4模板为EF框架添加实体根据数据库自动生成字段注释的功能

    转自http://jeffblog.sinaapp.com/archives/501 首先我们先下载一个文件GetSummery,这里我提供了,大家可以直接下载:下载 我们在数据库建立一个表,并给表中 ...

  8. 微信小程序云函数 添加数据到数据库

    1.新建小程序,建立云开发快速启动模板 这里和普通小程序的区别有三点 一是 project.config.json写上云函数所在目录"cloudfunctionRoot": &qu ...

  9. ThinkPHP讲解(六)——添加数据

    添加数据到数据库有三种方式 第一种:使用数组添加 $model=D("Info"); //实例化对象 //添加数据的第一种方式:使用数组添加 //要添加的数组,必须是关联数组,ke ...

随机推荐

  1. c语言中数组的定义和java中数组定义的一些区别

    感谢原文:https://blog.csdn.net/gzwdz778/article/details/79799408 一维情况下: c中,数组的声明需要给出数组的维数,比如: int arr[5] ...

  2. JAVA多线程学习十五 - 阻塞队列应用

    一.类相关属性 接口BlockingQueue<E>定义: public interface BlockingQueue<E> extends Queue<E> { ...

  3. Java线程--CopyOnWrite容器使用

    原创:转载需注明原创地址 https://www.cnblogs.com/fanerwei222/p/11871602.html Java线程--CopyOnWrite容器使用 CopyOnWrit容 ...

  4. Ansible 自动化运维——剧本(playbook)

    Ansible 自动化运维--剧本(playbook) 1.playbook介绍: playbook是ansible用于配置,部署,和管理被控节点的剧本.通过playbook的详细描述,执行其中的ta ...

  5. 框架3.2--搭建V·P·N

    目录 部署OpenVPN 一.服务端 1.安装openvpn和证书工具 2.生成服务器配置文件 3.准备证书签发相关文件 4.准备签发证书相关变量的配置文件 5.初始化PKI生成PKI相关目录和文件 ...

  6. PHP爱考的那些笔试题

    PHP爱考的那些笔试题 来自<PHP程序员面试笔试宝典>,涵盖了近三年了各大型企业常考的PHP面试题,针对面试题提取出来各种面试知识也涵盖在了本书. 一.单例模式是在应用程序中最多只能拥有 ...

  7. 从零开始学mitmproxy抓包工具

    Man In The Middle mitm是Man In The Middle的首字母缩写,意思是位于中间的人,表明mitmproxy是一个代理,可以拦截请求,实现网络抓包.知名的网络抓包工具有Fi ...

  8. 32、python并发编程之背景知识

    目录: 一 引子 二 为什么要有操作系统 三 什么是操作系统 四 操作系统与普通软件的区别 五 操作系统发展史 六 总结视频链接: 一 引子 顾名思义,进程即正在执行的一个过程.进程是对正在运行程序的 ...

  9. Dubbo源码剖析六之SPI扩展点的实现之getExtensionLoader

    Dubbo SPI机制之三Adaptive自适应功能 - 池塘里洗澡的鸭子 - 博客园 (cnblogs.com)中,示例案例中自定义了扩展接口而不是使用Dubbo已提供的扩展接口.在案例中,主程序分 ...

  10. 使用Jitpack发布开源Java库

    原文:使用Jitpack发布开源Java库 | Stars-One的杂货小窝 很久之前也写过一篇使用Jitpack发布Android开源库的文章,详见Android开发--发布第三方库到JitPack ...