ajax修改功能的写法
因为做的是一个内部管理系统,只用了一个主页面,所有的都不允许整个网页刷新,所以我们只能用ajax来做,当然刚开始做也走了很多的弯路,最终还是做出来了 这点还是比较欣慰的。
今天要整理一下ajax实现修改功能 这里的login登录也不写了,主要是写一下修改的大体代码,方便以后用的时候查找。
样式我用的是bootstrap,一开始要引入三个文件,这里就不多说了,下面是页面所要显示的样式
<
div
class
=
"modal fade"
id
=
"myModal2"
tabindex
=
"-1"
role
=
"dialog"
aria-labelledby
=
"myModalLabel"
aria-hidden
=
"true"
>
<
div
class
=
"modal-dialog"
>
<
div
class
=
"modal-content"
>
<
div
class
=
"modal-header"
>
<
button
type
=
"button"
class
=
"close"
data-dismiss
=
"modal"
aria-hidden
=
"true"
>×</
button
>
<
h4
class
=
"modal-title"
id
=
"myModalLabel"
>修改</
h4
>
</
div
>
<
div
class
=
"modal-body"
>
<?
php
$
sql
=
"select * from qxcg "
;
$arr=$db->Query($sql);
foreach($arr as $v)
{
$sqn = "select qxmc from qxypmx where qxdh='{$v[1]}'";
$att = $db->Query($sqn);
$squ = "select uid from login where num='{$v[4]}'";
$ann = $db->Query($squ);
}
?>
器械名称: <
input
type
=
"text"
value="<?php echo $att[0][0]; ?>" id="rmc"/><
br
/><
br
>
采购数量:<
input
type
=
"text"
value="<?php echo $v[2]; ?>" id="rsl"/><
br
/><
br
/>
采购日期:<
input
type
=
"text"
value="<?php echo $v[3]; ?>" id="rqi"/><
br
/><
br
/>
采购员:<
input
type
=
"text"
readonly
=
"readonly"
value="<?php echo $ann[0][0]; ?>" id="rcg"/>
</
div
>
<
div
class
=
"modal-footer"
>
<
button
type
=
"button"
class
=
"btn btn-default"
data-dismiss
=
"modal"
>关闭</
button
>
<
button
type
=
"button"
class
=
"btn btn-primary"
id
=
"rcbtn"
>保存</
button
>
</
div
>
</
div
>
<!-- /.modal-content -->
</
div
>
<!-- /.modal -->
</
div
>
</
div
>
当然看到这个地方,还要有一个修改的按钮 需点击后触发事件
<
input
type
=
'button'
class
=
'xiugai'
value
=
'修改'
data-toggle
=
'modal'
data-target
=
'#myModal2'
ids0
=
'{$v[0]}'
ids1
=
'{$att[0][0]}'
ids2
=
'{$v[2]}'
ids3
=
'{$v[3]}'
ids4
=
'{$ann[0][0]}'
/> //这里面的值是通过php代码求出来的,这里就不多说了
下面是ajax部分了 为了方便,我把修改写成了一个方法,用到的时候直接调用就可以了
function
xiugai()
{
var
ids =
""
;
//首先定义为空
var
rmc1=
""
;
var
rsl1=
""
;
var
rqi1=
""
;
var
rcg1=
""
;
$(
".xiugai"
).click(
function
() {
//给修改按钮一个点击事件
ids = $(
this
).attr(
"ids0"
);
rmc1= $(
this
).attr(
"ids1"
);
//把之前有的值取出来,赋值给表单的val
rsl1= $(
this
).attr(
"ids2"
);
rqi1= $(
this
).attr(
"ids3"
);
rcg1= $(
this
).attr(
"ids4"
);
$(
"#rmc"
).val(rmc1);
$(
"#rsl"
).val(rsl1);
$(
"#rqi"
).val(rqi1);
$(
"#rcg"
).val(rcg1);
$(
"#rcbtn"
).click(
function
(){
var
rmc=$(
"#rmc"
).val();
var
rsl=$(
"#rsl"
).val();
var
rqi=$(
"#rqi"
).val();
var
rcg=$(
"#rcg"
).val();
$.ajax({
url:
"xiugai.php"
,
data:{ids:ids,rmc:rmc,rsl:rsl,rqi:rqi},
type:
"POST"
,
dataType:
"TEXT"
,
success:
function
(xx){
//alert(xx);
if
(xx.trim()==
"OK"
)
{
alert(
"修改成功"
);
Load();
}
}
})
$(
'#myModal2'
).modal(
'hide'
)
})
});
}
<?php
$ids
=
$_POST
[
"ids"
];
$rmc
=
$_POST
[
"rmc"
];
$cgsl
=
$_POST
[
"rsl"
];
$cgrq
=
$_POST
[
"rqi"
];
include
(
"DBDA.class.php"
);
$db
=
new
DBDA();
$sql1
=
"select qxdh from qxypmx where qxmc='{$rmc}'"
;
$arr
=
$db
->Query(
$sql1
);
$sql
=
"update qxcg set qxdh='{$arr[0][0]}',cgsl='{$cgsl}',cgrq='{$cgrq}' where ids='{$ids}'"
;
if
(
$db
->Query(
$sql
,0))
{
echo
"OK"
;
}
else
{
echo
"NO"
;
}
这样就可以实现修改按钮的功能了 点击修改之后有个弹出框,如图所示:
修改后点击保存,弹出框消失,内容保存就Ok了
ajax修改功能的写法内容分享到这里就完结了,不知道大家对此有没有更加熟悉一些。如果你觉得这篇文章还不错的话,可以收藏起来方便日后使用,更多资讯可以来爱站技术频道网站寻找。
上一篇:编写ajax登录页面的代码
下一篇:Ajax校对有没有重复的实例代码