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. react 没有嵌套关系的组件通讯

    前提准备四个文件,两个子组件:List.List2和一个events.js文件以及一个App.js父组件; 在src目录下创建events.js,里面的内容如下: // events.js(以常用的发 ...

  2. .NET 诞生已20周年,您的 .NET 技能是否还停留在2010 年?

    20年来,我们见证了超过上千万.NET 开发员,当前有600万.NET 开发者正在使用.NET技术构建各类解决方案.今天,IT市场对.NET 开发人员的需求达到了前所未有的程度,特别是在中国,各大公司 ...

  3. [POI2009]SLO-Elephants

    首先可以发现我们可以发现最终状态和初始状态都是一个大小为 \(n\) 的排列,且恰好有 \(n\) 种关系,于是我们对于每个 \(a_i\) 连一条 \(a_i \rightarrow b_i\) 的 ...

  4. sqlserver查出来的数据丢失

    问题描述 今天利用sqlserver查数据,使用了一个ROUND(308.16000, 2)函数,发现在sqlserver工具中显示正常,但是在服务端查出来就会发生精度丢失问题. ROUND和CAST ...

  5. JDK停止工作

    问题:在服务器上运行程序,有时会出现JDK已停止工作,如图: 解决:在网上查找了很多资料,主要有以下几点 1.程序冲突,回想近期是否新安装了程序,将该程序进行关闭之后,再运行程序 2.异常未处理,即代 ...

  6. Java UDP实现聊天功能代码【转】

    感谢大佬大佬!!!:https://www.cnblogs.com/woshijpf/p/3735684.html 我以前经常写的是基于TCP的网络编程,由于TCP建立连接鼻血要经过三次握手连接,服务 ...

  7. IOS scrollView 图片浏览

    // // ViewController.m // 0426 // // Created by apple on 15/4/26. // Copyright (c) 2015年 gense. All ...

  8. 痞子衡嵌入式:i.MXRT连接特殊Octal Flash时(OPI DTR模式下反转字节序)下载与启动注意事项(以MX25UM51245为例)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是OPI DTR模式下反转字节序的Octal Flash在i.MXRT下载与启动注意事项. 在恩智浦官方参考设计板 MIMXRT595-E ...

  9. 帆软报表(finereport)根据提供的数据求出该日期所在的季度

    根据当前日期求字段中日期的季度 Oracle数据库 select T1.INDEXCODE ,T1.CREATETIME ,CASE when T1.CREATETIME = (case when t ...

  10. [源码解析] NVIDIA HugeCTR,GPU版本参数服务器---(3)

    [源码解析] NVIDIA HugeCTR,GPU版本参数服务器---(3) 目录 [源码解析] NVIDIA HugeCTR,GPU版本参数服务器---(3) 0x00 摘要 0x01 回顾 0x0 ...