AJAX+PHP实现局部刷新表单

发布于2016-11-22 / 869次浏览

在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>