00:00/
发布于2016-11-22 / 806次浏览
在PHP日常开发中,很多时候需要用到局部刷新,比如表单的提交并刷新。
add.php
include_once('connect.php');
$userName=$_POST['userName'];
$chinese=$_POST['chinese'];
$math=$_POST['math'];
$english=$_POST['english'];
$sql=mysql_query("insert into test (name,math,english,chinese) VALUES ('$userName','$math','$english','$chinese')");
$query = mysql_query("select * from test");
while($row=mysql_fetch_array($query)){
$arr['list'][] = array(
'userName' => $row['name'],
'math' => $row['math'],
'english' => $row['english'],
'chinese' => $row['chinese'],
);
}
//print_r($arr);
echo json_encode($arr);
局部JS代码:
function add() {
if ($("#userName").val() == "") {
layer.tips('不能为空', '#userName');
return;
}
if ($("#chinese").val() == "") {
layer.tips('不能为空', '#chinese');
return;
}
if ($("#math").val() == "") {
layer.tips('不能为空', '#math');
return;
}
if ($("#english").val() == "") {
layer.tips('不能为空', '#english');
return;
}
var formdata = {
flag: "add",
userName: $("#userName").val(),
chinese: $("#chinese").val(),
math: $("#math").val(),
english: $("#english").val()
}
$.ajax({
url: "add.php",
timeout: 3000,
dataType: "json",
type: "post",
data: formdata,
beforeSend:function(){
$("#loading").append("
“); }, success: function (json) { $(“#div4”).empty(); //清空数据 $(“#addModal”).modal(“hide”); $(“input”).val(“”); var html = “”; var list = json.list; $.each(list,function(index,array){ //遍历json数据列 li += “array[‘userName’] “; html += ” ” + “” + array.userName + ” ” + “” + array.chinese + ” ” + “” + array.math + ” ” + “” + array.english + ” ” + ” “; }); $(“#div4”).append(html); $(“#loading”).empty(); } }) } 局部HTML代码:
<div class="row-fluid">
<h4>数据列表</h4>
<div class="add"><a class="btn btn-success" onclick="openadd();">新增</a></div>
<div class="w" >
<div class="span12">
<table class="table table-condensed table-bordered table-hover tab">
<thead >
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>英语</th>
</tr>
</thead>
<thead id="div4">
<?php while($line=mysql_fetch_array($result,MYSQL_ASSOC))
{?> <tr>
<th><?php echo $line['name']?></th>
<th><?php echo $line['chinese']?></th>
<th><?php echo $line['math']?></th>
<th><?php echo $line['english']?></th>
</tr>
<?php
}
?>
</thead>
<tbody id="tbody"></tbody>
</table>
<div id="page" class="tr"></div>
</div>
</div>
<div id="addModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">添加成绩</h3>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="userName">姓名</label>
<div class="controls">
<input type="text" id="userName" placeholder="姓名">
</div>
</div>
<div class="control-group">
<label class="control-label" for="Chinese">语文</label>
<div class="controls">
<input type="text" id="chinese" placeholder="语文">
</div>
</div>
<div class="control-group">
<label class="control-label" for="Math">数学</label>
<div class="controls">
<input type="text" id="math" placeholder="数学">
</div>
</div>
<div class="control-group">
<label class="control-label" for="English">英语</label>
<div class="controls">
<input type="text" id="english" placeholder="英语">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
<button class="btn btn-primary" id="add" onclick="add();">保存</button>
<button class="btn btn-primary" id="edt" onclick="edt();">保存</button>
</div>
<div id="loading">
</div>
</div>
</div>
最后修改于:2017年6月19日 上午11:25