PHP修改表格,查操作实例详解_JavaScript_脚本之家
分类:pc28.am

近段时间接受叁个相比奇葩的必要,对方要求在集团站中插足多少个相通word的表单,并供客户在线填写与提交。

   必要: 1.纯熟shi用  post 和  get  传值        2. php嵌套在HTML中        3.熟稔:if 语句(其余语句)的应用

Wechat小程序 增、删、改、查操作实例安详严整

悉心看了后生可畏晃,该表单的字段高达一百五个,这几个量级是风华正茂对一骇人听闻的。借使种种input手动去填写id和name的话,该是三个多么骇人听闻的体力活啊。


1.以收货地址的增加和删除改查为例

数11遍构思了弹指间,为幸免苦逼的去挨门挨户填写input的id与name,决定用JS合营PHP的章程来解决这些表单三番四回串的付出专门的学问。

深入分析变量的时候 引号 可以 看成是 变量本人的 也得以看成 是 格式里自带的 那就好理解 为何 有的深入深入分析出来须求加引号 有的不必要加引号了

js文件是逻辑调节,首纵然它发送央求和选用数据, json用于此页面局部配置何况覆盖全局app.json配置, wxss用于页面包车型客车样式设置, wxml便是页面,也就是html

表单组成部分

 

前端页面首要彰显二个表单和原来就有收货人音讯

表单首先根据顾客的渴求,将急需填写的报表与选用依照word文书档案的原型举办布局,使其相符客商体验,如下图:

 

1.内部多少个关键点需求通晓

(上图只是截取表单的一小部分作为典范,实际上那么些表单是最佳之大的)

做题长久不要 把 数据库 和 界面割裂开 (租房难题) 要成功 后端 怎么改前端怎么变

a.Form表单,供给绑定二个submit事件,在小程序中,属性为bindsubmit,

当表单的html布局产生之后,我们就需求伊始对这一个表单的input设定id与name用于表单提交了。

 

bindsubmit=”formSubmit”这里的性质值formSubmit,命名可感到切合规范的大肆值,也等于早前html中的 onsubmit=”formSubmit(卡塔尔(英语:State of Qatar)”,是叁个函数名,当提交的时候触发formSubmit那一个函数事件,这一个函数写在js中。

序言中早就商量到了input相当多,所以我们那边运用JS的办法来为input自动增加id与name。代码如下:

租房 例题(链接) 

b.其余的属性和前边的HTML大约,注意的是,表单必须要有name=“value”,后端管理和从前同样,举个例子name=”username”PHP能够用$_POST[‘username']来接收。

$.ready{var inputNum = 0;$.each.attr({name:‘val' inputNum,id:‘val' inputNum});inputNum  })})

 

c.由于小程序尚未input submit这几个按键,所以在各种form表单中都要有二个付出按键,

透过js处理后,该页面包车型大巴兼具input都会自行依据自增1的艺术对id和name举办增添。至此,那些表单的许多能够健康使用了。

稍许属性 在 div 里面有 默许值 所以用的时候绝不安装属性 譬如 display 私下认可block 纵然不写 也暗许 同理 checked 属性(详见上边租房例题中)

挂号,这么些开关正是用来开启提交事件的。

表单GET部分

 

d.小程序给我们三个打包好的方法onLoad: function(卡塔尔国,当页面加载的时候,调用那几个主意。

OK,下边已经足以平常的把表单提交到PHP程序中进行管理了。当然上边的不二秘籍也适用于别的大器晚成种web程序,比如说.net,jsp,asp等等…..


var app = getApp()Page({data:{}, onLoad: function() { var that = this; //收货地址首页 wx.request({ //缺少用户唯一标识,现在的在服务器的控制器里有一个假id = 2 url: 'https://shop.yunapply.com/home/shipping/index', method: 'GET', data: {}, header: { 'Accept': 'application/json' }, success: function { that.setData({ "addressInfo": res.data.info, }) console.log; }, fail:function(){ wx.showToast({ title: '服务器网络错误!', icon: 'loading', duration: 1500 }) } }) }})

下一步我们就供给对交付过来的字符串进行拆解,以博得表单内的值。关于怎么样获得表单的传值,本文就不做解释了。

潜心:   1.施行进程中并非在同多少个分界面举行的  而是来回跳转界面因为速度太快 所以感到分界面不动;

由于表单传过来的值也是N个,所以大家也不也许一个八个的去写数组变量来获得这个值,所以那边也亟需利用一些主意来拍卖。

        操作分界面(展现分界面)-->代码施行分界面-->操作界面(呈现分界面)

收货地址的首页,用于拉取当前顾客已有些收货地址

好,下边大家来说正事。首先大家遵照事情发生前的js程序逻辑来揣摩,怎么样让那么些数组每一种自增1来促成数组的输出。

           2.跳转分界面而不是  重新展开分界面: js中跳转分界面:window.location.href(""卡塔尔(قطر‎

var that = this;

那组代码首要用在表单input与request顺序意气风发致的图景下选用,假如不能够挨个对应顺序的话,则会现出纷乱。由此用的时候须要郑重!

                       PHP中跳转分界面:header("location:这里写地址不加引号"卡塔尔;

不精晓为啥要这么做,也许是为了幸免this冲突大概语意不明显,将近年来的靶子,赋值给变量that

提交数据库的时候能够杜撰接受foreach的章程将获得的传参处理成数组再插入数据库会比极低价。

             跳转界面:window.location.href(""卡塔尔国;

wx.request发起https请求

    3.交到按键 按下时  首先触发点击事件(比如前边说的JS代码 正则表达式中 例题  也足以看下边例题 )推行达成后再提交新闻;

url: '

    4.PHP中  post  与 get  的区分(把品质也同步传了过去卡塔尔国

method: 'GET',乞请的点子,暗许是GET,那时候POST的时候,必得注脚

        ①相符点:  post与get 都足以接过不用分界面提交的 数据(接纳的数目存在数组里面)【关联数组的款型存在】

data: {},发送的央求的多寡

        ②差别点:  post只可以够承当 表单提交的数据 ,get 能够选用非表单传来的数额(包罗表单)

header: {},发送的头新闻,

                  体贴介绍get 方法   :以下只是个特例  ,使用这种方法七个尺码:1.机关跳转到代码分界面href='shanchu.php

GET方式的头音信为:'Accept': 'application/json'

                                                2.?后面表示出要传給post的值?code="要传什么?";

POST形式的头音信为:"Content-Type": "application/x-www-form-urlencoded"

                                                    全部写法 如下:                                               

success:function(卡塔尔央求成功调用的诀要

<a href='shanchu.php?code={$attr[0]}' onclick="return confirm('确定删除么')">
        删除
        </a>

Fail:function(卡塔尔 央浼失败调用的艺术

---------------以上内容 都以和煦见解 款待指正-----------------------------------------------------------------------------------

success: function { that.setData({ "addressInfo": res.data.info, }) },

1.因而PHP 对数据库实行增加和删除改的点子

res为调用成功未来服务器端再次来到的数额,

难点是有外键关系的(以致相近的) 进行增加和删除改  ;  难题2: 对数据库的更动

that.setData({"addressInfo": res.data.info,}卡塔尔国增多数量到近年来页面包车型大巴data对象,键名称叫addressInfo,键值是回来的数量,作者须求的是res的data对象的info对象的具有音信

注重步骤

fail:function(){ wx.showToast({ title: '服务器网络错误!', icon: 'loading', duration: 1500 }) }

1.主界面((须求创立表格)须求订正的分界面)① 跳转分界面

网络央求失利调用的秘籍

2.(改进)代码分界面(那个分界面因为急需填写内容 所以供给 表单成分  <input > 标签卡塔尔(英语:State of Qatar) ② 跳转到下生机勃勃分界面(增添分界面)

showToast相通于JS中的alert,弹出框,title 是弹出框的来得的消息,icon是弹出框的Logo状态,近日独有loading和success这四个景况。duration是弹出框在显示屏上突显的大运。

3.增多界面③ 跳转界面(跳转到主分界面)修改成功在主分界面上面显示

a.url是您诉求的网站,比方原先在前面叁个,POST表单中action=‘index.php',这里的index.php是相对路线,而小程序乞求的网站必需是网络相对路线。

难题: 每一步中 都亟待用到  多张表格的开始和结果---须要if语句的嵌套

b.'

---未完待续

c.将拿到的值加多到data里

--------------------小知识(自个儿挂点应接指正)-----------------------------------------------------------------------------------         

看HOME模块下的Shipping调整下的index方法

1.PHP标签内的变量只可以由PHP标签内的话语选拔;
2.PHP 语句 正是 嵌在言辞内部 当作JS语句的
3.echo 出口字符串(输出语句加引号)
4.黄金年代旦引号内部 还也会有引号冲突 则采用---转义字符
5.PHP与语句 能够嵌在 任何岗位 充任 JS的剧中人物
6.解析变量的时候 假如有 转义字符 转义后朝气蓬勃旦是字符串 在转义时要加引号

public function index(){ //$id 为用户名id 等以后可以通过token获取或者session什么的 $use_id = 2; $res = D->getAddress; if { $this->error; }else{ $this->success; }}

7.独有PHP代码的页面代码区域 只须求写裸的PHP 代码

查阅Shipping模型中的getAddress(卡塔尔国方法

 8.表单成分中 改革输入内容 修正的是value值  下拉菜单除却   详见  上边例题

/** * 获取收货地址信息 * @param $id 当前用户id * @return 属于用户的所有地址 */public function getAddress{ $address_list = $this->where)->select(); if ($address_list == false){ return false; } return $address_list;} 

---------------------------------以下八个代码区为叁个生龙活虎体化的退换进程--------------------(多张表存在关联的拍卖)-- 

如此那般就借助客商是或不是有地点还回去相应的JSON数据

1.第一步:

本例子的JSON数据是

图片 1图片 2

{"info":[{"id":"4","user_id":"2","name":"addTest","mobile":"15162550544","province":"","city":"","district":"","address":"44563","createtime":"2017-01-10 18:45:27","modifytime":"2017-01-10 18:45:27","default":"0"}],"status":1,"url":""}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
<table width="100%" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td>代号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>民族</td>
        <td>生日</td>
        <td>操作</td>
    </tr>

    <?php

    $db = new MySQLi("localhost","root","123","mydb");
    $sql = "select * from info";

    $result = $db->query($sql);
    $attr = $result->fetch_all();

    foreach($attr as $v)
    {
        $sex = $v[2];
        $sex = $sex?"男":"女";

        $nation = $v[3];
        $sqln = "select name from nation where code='{$nation}'";
        $rn = $db->query($sqln);
        $an = $rn->fetch_row();

        echo "<tr><td>{$v[0]}</td><td>{$v[1]}</td><td>{$sex}</td><td>{$an[0]}</td><td>{$v[4]}</td><td><a href='xiugaiinfo.php?code={$v[0]}'>修改</a></td></tr>";
    }

    ?>

</table>
</body>
</html>

伸手成功之后就将JSON增加到data{}中,并安装键值为addressInfo

info.php

那么接下去即是将那些消息显示在前端页面上

2.第二步:

收货地址{{item.address}}1km收货人{{item.name}}收货人电话{{item.mobile}}删除编辑

图片 3图片 4

决定属性wx:for绑定一个数组,便是JS中的addressInfo这几个数组,私下认可数组的当下项的下标变量名默认为index,数组当前项的变量名默感到item。能够依据{{item.address}}、{{item.name}}、{{item.mobile}}、{{item.id}}获取到当前多少之处、收货人、电话和该条音讯的id

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 </head>
 7 
 8 <body>
 9 <?php
10 $code = $_GET["code"];
11 $db = new MySQLi("localhost","root","123","mydb");
12 $sql = "select * from info where code='{$code}'";
13 
14 $result = $db->query($sql);
15 $attr = $result->fetch_row();
16 ?>
17 
18 <h1>修改人员信息</h1>
19 <form action="uinfochuli.php" method="post">
20 <div>
21     <input type="hidden" value="<?php echo $attr[0] ?>" name="code" />
22 </div>
23 <div>
24     姓名:
25     <input type="text" name="name" value="<?php echo $attr[1] ?>" />
26 </div>
27 <div>
28     性别:
29     <input <?php echo $attr[2]?"checked='checked'":""; ?> type="radio" name="sex" value="1" />男 
30     <input <?php echo $attr[2]?"":"checked='checked'"; ?> type="radio" name="sex" value="0" />女
31 </div>
32 <div>
33     民族:
34     <select name="nation">
35         <?php 
36         $sqln = "select * from nation";
37         $rn = $db->query($sqln);
38         $an = $rn->fetch_all();
39         foreach($an as $vn)
40         {
41             if($attr[3]==$vn[0])
42             {
43                 echo "<option selected='selected' value='{$vn[0]}'>{$vn[1]}</option>";
44             }
45             else
46             {
47                 echo "<option value='{$vn[0]}'>{$vn[1]}</option>";
48             }
49         }
50         ?>
51     </select>
52 </div>
53 <div>
54     生日:
55     <input type="text" name="birthday" value="<?php echo $attr[4] ?>" />
56 </div>
57 <div><input type="submit" value="修改" /></div>
58 </form>
59 </body>
60 </html>

巡回之后就足以据守格式呈现全部地方新闻了,也就是TP模板中的foreach

xiugaiinfo.php

3.第三步:$r = $db->query($sql); $r是一个boolearn值

在前台模板的循环数据里能够阅览那样一条标签

图片 5图片 6

event.currentTarget.dataset.deleteid;表示事件对象的目标的data-*的值
 1 <?php
 2 $code = $_POST["code"];
 3 $name = $_POST["name"];
 4 $sex = $_POST["sex"];
 5 $nation = $_POST["nation"];
 6 $birthday = $_POST["birthday"];
 7 
 8 $db = new MySQLi("localhost","root","123","mydb");
 9 $sql = "update info set name='{$name}',sex={$sex},nation='{$nation}',birthday='{$birthday}' where code='{$code}'";
10 
11 echo $sql;
12 
13 $r = $db->query($sql);
14 
15 if($r)
16 {
17     header("location:info.php");
18 }
19 else
20 {
21     echo "修改失败!";
22 }

bindtap属性是Wechat在模板页中绑定点击事件,deleteClick为触发时间的不二等秘书诀名

uinfochuli.php

在index.js中,删除代码如下:

 

//删除地址 deleteClick:function{ var id = event.currentTarget.dataset.deleteid; wx.request({ url: 'https://shop.yunapply.com/home/shipping/delAddress?id=' id, data: {}, method: 'GET', success: function{ if{ wx.showToast({ title: res.data.info, icon: 'loading', duration: 1500 }) }else{ wx.showToast({ title: res.data.info, icon: 'success', duration: 1000 }) //删除之后应该有一个刷新页面的效果,等和其他页面刷新跳转一起做 } }, fail:function(){ wx.showToast({ title: '服务器网络错误!', icon: 'loading', duration: 1500 }) } }) } 

 

点击前端删除按键的时候,触发deleteClick事件,能够流传三个参数,代表事件指标。

 

event.currentTarget.dataset.deleteid;表示事件指标的目的的data-*的值

 

下一场经过GET方式传入url,在服务器端删除功能如下

              

public function delAddress{ $res = D->where->delete{ $this->success; }else{ $this->error; }}

依照再次来到的JSON值就足以提示删除成功与否

增、改

事前认为增添和改善会和表单提交相近轻巧,但是做了部分大概以为不一致样,好辛亏写叁回。

a.Form表单,必要绑定三个submit事件,在小程序中,属性为bindsubmit,

bindsubmit=”formSubmit”这里的性质值formSubmit,命名可感觉切合标准的任意值,也正是从前html中的 onsubmit=”formSubmit(卡塔尔国”,是二个函数名,当提交的时候触发formSubmit这一个函数事件,这些函数写在js中。

b.其余的天性和后面包车型大巴HTML差不离,注意的是,表单应当要有name=“value”,后端管理和原先同样,比方name=”username”PHP能够用$_POST[‘username']来接收。

c.由于小程序还未input submit这一个按键,所以在种种form表单中都要有三个交给开关,

登记,那个开关正是用来拉开提交事件的。

d.由于增添地址和编排地址都是在多个页面包车型大巴,所以笔者必要在每种表单中,加贰个暗中同意值变量,当点击改正的时候,暗中同意值就显示在输入框中。

e.表单中有二个编辑,绑定了事件editClick,当点击那一个按键的时候,就能进去编辑格局

累计和退换的放在三个函数里面,可是订正数据的来得是此外贰个函数

先说矫正,点点击编辑的时候,触发editClick事件

editClick:function{ var that = this; var id = event.currentTarget.dataset.editid; wx.request({ url: 'https://shop.yunapply.com/home/shipping/edit?id=' id, data: {}, method: 'GET', success: function{ if{ wx.showToast({ title: res.data.info, icon: 'loading', duration: 1500 }) }else{ that.setData({ "addressEdit": res.data.info, }) } }, fail:function(){ wx.showToast({ title: '服务器网络错误!', icon: 'loading', duration: 1500 }) } }) },

最下边有贰个保存按键,当点击编辑的时候,触发editClick:function,这么些event是最近接触事件的靶子,

var id = event.currentTarget.dataset.editid; 正是得到当前风云目的的dataset中的editid的值,这里id是现阶段地方的id

url: '

Wx.request 的url,将id值放在url上,作为GET参数,传递到服务器。

data: {},是内需非常传递的数量

method: 'GET',是数额传递情势 默许是“GET”,保持大写

data:{mobile:e.detail.value.mobile,password:e.detail.value.password},

那边的data正是POST给劳务器端的数量 以{name:value}的花样传递

success:function(卡塔尔(قطر‎是呼吁状态成功触发是事件,也正是200的时候,注意,央求成功不是操作成功,须求只是那一个顺序到服务器端那条线的通的。

fail:function(卡塔尔(英语:State of Qatar)就是网络伏乞不成事,触发的平地风波。

那边的意气风发段代码是和PHP后端程序有关系的,具体流程是这么的,

1.GET由此数量到

2.后端PHP代码如下:

控制器ShippingController.class.php

public function edit{ $res = D->find; $this->success;}

也正是说将这条数据抽出来,没什么好说的。

 that.setData({ "addressEdit": res.data.info, }) }

此地号令成功之后,调用小程序setData方法,将劳动器端重回的新闻放到address艾德it[]中,然后在前端页面调用{{addressEdit.id}}、{addressEdit.name}}、{addressEdit.mobile}}、{addressEdit.address}}将数据展现出来,那正是改进时候的操作。

接下去是付出表单的操作

addSubmit:function{ if(e.detail.value.mobile.length==0||e.detail.value.name.length==0 ||e.detail.value.address.length==0){ wx.showToast({ title: '收货人所有信息不得为空!', icon: 'loading', duration: 1500 }) }else if(e.detail.value.mobile.length != 11){ wx.showToast({ title: '请输入11位手机号码!', icon: 'loading', duration: 1500 }) }else{ wx.request({ url: 'https://shop.yunapply.com/home/shipping/save', header: { "Content-Type": "application/x-www-form-urlencoded" }, method: "POST", data:{id:e.detail.value.id,mobile:e.detail.value.mobile,name:e.detail.value.name,address:e.detail.value.address}, success: function { if{ wx.showToast({ title: res.data.info, icon: 'loading', duration: 1500 }) }else{ wx.showToast({ title: res.data.info, icon: 'success', duration: 1000 }) setTimeout{ wx.navigateTo({ url:'../address/index' }) },1000) } }, fail:function(){ wx.showToast({ title: '服务器网络错误!', icon: 'loading', duration: 1500 }) } }) } }

在前者的FORM表单中,当点击formtype=“submit”那么些按键的时候,触发addSubmit事件,前面包车型客车if都以JS验证,制止客户不填写音信。

1.别样的request央浼大约,找多少个不均等的

url: 'https://shop.yunapply.com/home/shipping/save',

调用服务器端的save方法

 header: { "Content-Type": "application/x-www-form-urlencoded" },

是因为POST和GET传送数据的不二等秘书技不等同,POST的header必需是

"Content-Type": "application/x-www-form-urlencoded" 

GET的header可以是'Accept': 'application/json'

 data:{id:e.detail.value.id,mobile:e.detail.value.mobile,name:e.detail.value.name,address:e.detail.value.address},

这里是必要POST到服务器端的多少

Save方法代码

public function save(){ //$user_id $user_id = 2; if { $shipping = D; if { $this->error,'',true); }else{ if (is_numeric{ if ($shipping->editAddress{ $this->success; }else{ $this->error; } }else{ if ($shipping->addAddress{ $this->success; }else{ $this->error; } } } }}

谢谢阅读,希望能扶持到大家,多谢我们对本站的支撑!

本文由pc28.am发布于pc28.am,转载请注明出处:PHP修改表格,查操作实例详解_JavaScript_脚本之家

上一篇:不另行随机数列生成算法,js数组中什么随机收取 下一篇:没有了
猜你喜欢
热门排行
精彩图文