AJAX calling PHP Array - Using jQuery / JSON
Question
So I have an array of default values in a php array the file (backend.php) has multiple functions and acts. I want to target just the array with the act="default". I need to take the the encoded json php array and populate and html form with it.
html page - frontend.html
<html>
<head>
</head>
<body>
<h1>Form Validation</h1>
<form id="PersonForm">
Name:
<input id="name" type ="text" name="name"></input>
<br><br>
Postal Code:
<input id="postal" type ="text" name="postal"></input>
<br><br>
Phone Number:
<input id="phone" type ="text" name="phone"></input>
<br><br>
Address:
<input id="address" type ="text" name="address"></input>
<br><br>
<input type="submit"></input>
</form>
<div id= "content"></div>
<a href="frontend.html">Refresh</a>
<a id="InsertDefault" href="#">Insert Default Data</a>
<br><br>
<ul id="errors"></ul>
<p id="success"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
php page - backend.php
<?php
if ($_REQUEST['act'] == 'default'){
$defaultData = array(
'name' => "Jane",
'postal' => "L5B4G6",
'phone' => "9055751212",
'address' => "135 Fennel Street"
);
echo json_encode($defaultData);
}
else if...
?>
main.js page (errors here)
$(document).ready(function()
{
$("#InsertDefault").click(function()
{
// make an AJAX call here, and place results into the form
$(document).ready(function(){
$('#content').load('backend.php', {'default':'defaultData'}, //this format
function (){ $('#content').html('these are the default values')}
);
// prevents link click default behaviour
defaultData.preventDefault();
return false;
});
$("#PersonForm").submit(function()
{
// Clear any success or error messages
$("#success").html("");
$("#errors").empty();
// make an AJAX call here, and set error or success accordingly
// prevents submit button default behaviour
return false;
});
});
1 answers
solution1
1 2015-12-07 22:54:28
Instead of using .load it would be better to use $.ajax or $.post since $.load will set the content of the selected returned data (which should be either text or HTML). In your case you want to return json so that you can set the form element values.
$(document).ready(function()
{
$("#InsertDefault").click(function(e)
{
// prevents link click default behaviour
e.preventDefault();
// make an AJAX call here, and place results into the form
$.ajax({
url: 'backend.php',
type: 'post',
data: {
act:'default'
},
dataType: 'json',
success: function(data) {
// set the form values
$('[name=name]').val(data.name);
$('[name=postal]').val(data.postal);
$('[name=phone]').val(data.phone);
$('[name=address]').val(data.address);
// display message
$('#content').html('Fields filled in with default values');
},
error: function() {
// handle your error
console.log('error');
}
});
return false;
});
$("#PersonForm").submit(function()
{
// Clear any success or error messages
$("#success").html("");
$("#errors").empty();
// make an AJAX call here, and set error or success accordingly
// prevents submit button default behaviour
return false;
});
});
Since your AJAX call is expecting json return you need to use header('Content-Type: application/json'); in your php script to set the data type.
It's also a good idea to use output buffering (see ob_start() and ob_clean() below) so that any notices outputted by php do not dirty the json your AJAX call is expecting.
ob_start();
if (isset($_POST['act']))
{
if ($_POST['act'] == 'default')
{
ob_clean();
header('Content-Type: application/json');
$defaultData = array(
'name' => "Jane",
'postal' => "L5B4G6",
'phone' => "9055751212",
'address' => "135 Fennel Street"
);
echo json_encode($defaultData);
exit();
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.