有兩種方法。第一種是使用典型的表單提交完全重新整理頁面
//your_page.php
$saveSuccess = null;
$saveMessage = null;
if($_SERVER['REQUEST_METHOD'] == 'POST') {
// if form has been posted process data
// you dont need the addContact function you jsut need to put it in a new array
// and it doesnt make sense in this context so jsut do it here
// then used json_decode and json_decode to read/save your json in
// saveContact()
$data = array(
'fullname' = $_POST['fullname'],
'email' => $_POST['email'],
'phone' => $_POST['phone']
);
// always return true if you save the contact data ok or false if it fails
if(($saveSuccess = saveContact($data)) {
$saveMessage = 'Your submission has been saved!';
} else {
$saveMessage = 'There was a problem saving your submission.';
}
}
?>
Add New Contact
第二種方式是使用AJAX。要做到這一點，你想要將表單處理完全分成單獨的檔案：
// process.php
$response = array();
if($_SERVER['REQUEST_METHOD'] == 'POST') {
// if form has been posted process data
// you dont need the addContact function you jsut need to put it in a new array
// and it doesnt make sense in this context so jsut do it here
// then used json_decode and json_decode to read/save your json in
// saveContact()
$data = array(
'fullname' => $_POST['fullname'],
'email' => $_POST['email'],
'phone' => $_POST['phone']
);
// always return true if you save the contact data ok or false if it fails
$response['status'] = saveContact($data) ? 'success' : 'error';
$response['message'] = $response['status']
? 'Your submission has been saved!'
: 'There was a problem saving your submission.';
header('Content-type: application/json');
echo json_encode($response);
exit;
}
?>然後在你的html / js
Add New Contact
$(function(){
$('#add_contact_submit').click(function(e){
e.preventDefault();
$form = $(this).closest('form');
// if you need to then wrap this ajax call in conditional logic
$.ajax({
url: $form.attr('action'),
type: $form.attr('method'),
dataType: 'json',
success: function(responseJson) {
$form.before("
"+responseJson.message+"
");
},
error: function() {
$form.before("
There was an error processing your request.
");
}
});
});
});