javascript 没有使用Ajax刷新的Project_CRUD
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 没有使用Ajax刷新的Project_CRUD相关的知识，希望对你有一定的参考价值。
<?php
//========= create con ===========
// include 'connection/connection.php';
error_reporting(1);
$host="localhost";
$user="root";
$pass="";
//connection
$con=mysql_connect($host,$user,$pass) or die(mysql_error());
//db selection
mysql_select_db("crud",$con);
// ========= Take user data from js post request
$edit_id = $_POST['php_edit'];
$name = $_POST['php_name'];
$address = $_POST['php_address'];
//========= Update(add) MySQL =========
$query_update = "UPDATE info SET info_name='$name', info_address='$address' WHERE info_id='$edit_id'";
$result_update = mysql_query($query_update);
if(!$result_update){
echo "wrong update query". mysql_error();
}
?>body{
font-size: 1rem;
}
table{
width: 50%;
margin: 30px auto;
border-collapse: collapse;
text-align: left;
}
tr{
border-bottom: 1px solid gray;
}
th,td{
border: none;
height: 30px;
padding: 2px;
}
tr:hover{
background-color: lightgray;
}
.form-group_custom{
width: 45%;
margin: 50px auto;
text-align: left;
padding: 20px;
border: 1px solid gray;
border-radius: 5px;
}
.input-group_custom{
margin: 10px 0px;
}
.input-group_custom label{
display: block;
text-align: left;
margin: 3px;
}
.input-group_custom input{
height: 50px;
width: 93%;
padding: 5px 10px;
font-size: 1rem;
border-radius: 5px;
border: 1px solid gray;
}
.save_btn, .delete_btn{
padding: 10px;
font-size: 0.9rem;
color: white;
/*background-color: lightgreen;*/
border: none;
border-radius: 5px;
}
.update_btn{
padding: 10px;
font-size: 0.9rem;
color: white;
background-color: lightgreen;
border: none;
border-radius: 5px;
}
#result1 {
margin: 30px auto;
padding-top: 20px;
border-radius: 5px;
color: black;
background: lightgray;
border: 1px solid gray;
width: 50%;
height: 50px;
text-align: center;
}
.delete_btn{
padding: 10px;
font-size: 0.9rem;
color: white;
background-color: lightgreen;
border: none;
border-radius: 5px;
}<?php
//========= create con ===========
// include 'connection/connection.php';
error_reporting(1);
$host="localhost";
$user="root";
$pass="";
//connection
$con=mysql_connect($host,$user,$pass) or die(mysql_error());
//db selection
mysql_select_db("crud",$con);
// ======== Retrieve Data =======
$row_arr = array();
$query = "SELECT * FROM info";
$result = mysql_query($query);
// check sql error
if(!$result){
echo "query failed".mysql_error();
}
while($row = mysql_fetch_assoc($result)){
$row_arr[] = $row;
}
echo json_encode($row_arr);
?>
<?php
//========= create con ===========
// include 'connection/connection.php';
error_reporting(1);
$host="localhost";
$user="root";
$pass="";
//connection
$con=mysql_connect($host,$user,$pass) or die(mysql_error());
//db selection
mysql_select_db("crud",$con);
// ========= Take user data from js post request
$name = $_POST['php_name'];
$address = $_POST['php_address'];
//========= Insert(add) MySQL =========
$query = "INSERT INTO info (info_name, info_address)
VALUES ('$name', '$address')";
$result_insert = mysql_query($query);
if($result_insert){
echo "<h3 id='result1'>Address have been saved.</h3>";
}
// header('location: index.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>CRUD</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<span></span>
<div id="result"></div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Address</th>
<th colspan='2'>Action</th>
</tr>
</thead>
<tbody id="table_row">
<tr id="result"></tr>
</tbody>
</table>
<div class="form-group_custom">
<div class="input-group_custom">
<label>Name</label>
<input type="text" id="name" required>
</div>
<div class="input-group_custom">
<label>Address</label>
<input type="text" id="address" required>
</div>
<div class="input-group_custom">
<button type="submit" name="save" class="btn btn-primary save_btn">Save</button>
<!-- <button type="submit" name="del" class="edit_btn">Edit</button> -->
<!-- Button trigger modal -->
</div>
</div>
<!-- For Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Update Profile</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Name</label>
<input type="text" class="form-control" id="update_name" value="">
</div>
<div class="form-group">
<label for="message-text" class="form-control-label">Address</label>
<textarea class="form-control" id="update_address"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary update_btn">Update</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<!-- <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script type="text/javascript" src="crud.js"></script>
</body>
</html><?php
//========= create con ===========
// include 'connection/connection.php';
error_reporting(1);
$host="localhost";
$user="root";
$pass="";
//connection
$con=mysql_connect($host,$user,$pass) or die(mysql_error());
//db selection
mysql_select_db("crud",$con);
$delete_id = $_POST['php_delete'];
$query_delete = "DELETE FROM info WHERE info_id=$delete_id";
$result_delete = mysql_query($query_delete);
if(!$result_delete){
echo "wrong query delete". mysql_error();
}
?>
$("document").ready(function(){
// if doc is ready, retrieve data from sql
retriveAndShow();
// if btn click, do function
$(".save_btn").click(function(){
var user_name = $("#name").val();
var user_address = $("#address").val();
// $.post(URL,data,callback);
$.post('insert.php',{php_name:user_name,php_address:user_address},function(data){
$("#result").html(data);
$("#name").val("");
$("#address").val("");
// for data retrieve as soon as click
retriveAndShow();
});
});
}); //document.ready
function retriveAndShow() {
// Retrieve and show data from sql when page is reday after refresh
var currentHTML = "";
$.get('ret.php', function(data){
var arr = JSON.parse(data);
for(var i=0;i<arr.length;i++) {
currentHTML = currentHTML + "<tr><td>" + arr[i].info_name + "</td><td>" + arr[i].info_address + "</td><td><button id='" + arr[i].info_id + "'" + " type='button' class='btn btn-warning edit_btn' data-toggle='modal' data-target='#exampleModal' value='" + i + "' data-whatever='@mdo'>Edit</button></td><td><button id='" + arr[i].info_id + "'" + " class='btn btn-danger del_btn'>Delete</button></td></tr>";
}
$("#table_row").html(currentHTML);
//===== For Delete =====
$(".del_btn").click(function(){
var click_id = $(this).attr("id");
// $.post(URL,data,callback);
$.post('del.php',{php_delete:click_id},function(data, status){
retriveAndShow();
});
});
// ======= For Edit =========
$('.edit_btn').click(function(){
var click_id = $(this).attr("id");
var click_index = $(this).attr("value");
$(".update_btn").attr("value",click_id);
$('#update_name').val(arr[click_index].info_name);
$('#update_address').val(arr[click_index].info_address);
});
$('.update_btn').click(function(){
var name = $('#update_name').val();
var address = $('#update_address').val();
var update_id = $(this).attr("value");
console.log(name);
console.log(address);
$.post('update.php',{php_edit:update_id, php_name:name, php_address:address},function(data, status){
retriveAndShow();
$('#exampleModal').modal('hide');
});
});
});
}
以上是关于javascript 没有使用Ajax刷新的Project_CRUD的主要内容，如果未能解决你的问题，请参考以下文章
ajax执行action，怎么没有刷新页面数据，要自己刷新一下页面数据才出来？