I did a similar post to this called Vanilla JavaScript Login form POST handler using fetch. Fetch returns a JavaScript Promise, which can be a bit of a pain so I've also done a version using XHR, see below:
var postJSON = function(url, method, data, callback) {
var xhr = new XMLHttpRequest();
xhr.open(method, url, true);
xhr.responseType = 'json';
xhr.onload = function() {
var status = xhr.status;
if (status === 200) {
callback(null, xhr.response);
} else {
callback(status, xhr.response);
}
};
xhr.send(data);
};
Here's how to call it:
const form = document.querySelector('form');
form.addEventListener('submit', function(ev) {
ev.preventDefault();
const url = this.getAttribute('action');
const method = this.getAttribute('method');
postJSON(url, method, new FormData(form), function(error, json) {
if (error !== null) {
console.log('parsing failed', error);
} else {
console.log('json.username', json.username);
console.log('json.password', json.password);
}
});
});
Showing posts with label POST. Show all posts
Showing posts with label POST. Show all posts
Tuesday, 26 February 2019
Wednesday, 10 August 2016
Using jQuery FormData to include files when making POST request
In this example I create a form, with a text, and file input field. When I submit the form, contents from all input fields are submitted through the 'FormData' class. The results from the called script are returned to a div. Finally, the fields are then cleared.
<html>
<head>
<title>jQuery File Upload</title>
</head>
<body>
<form action="upload.php" method="POST" enctype="multipart/form-data">
<input type="text" name="myname" />
<input type="file" name="fileinfo" multiple="" />
<button type="submit">Submit</button>
</form>
<div id="result"></div>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
(function()
{
$('form').on('submit', function(e)
{
var theDiv = $('div#result');
var thisForm = $(this);
var action = thisForm.attr('action');
var method = thisForm.attr('method');
$.ajax(
{
url: action,
type: method,
data: new FormData(this),
processData: false,
contentType: false
}).done(function(datareceived)
{
thisForm.find('input, textarea').val('');
theDiv.html(datareceived);
});
e.preventDefault();
});
})();
</script>
</body>
</html>
To test if it works I use upload.php. See
<?php
$str = NULL;
foreach($_FILES as $file)
{
if(move_uploaded_file($file['tmp_name'], $file['name']) == FALSE)
{
$str .= $file['name'].' not uploaded<br />';
}
}
$str .= '<br />POST items include : <br />';
foreach($_POST as $postitem => $value)
{
$str .= 'Name : '.$postitem.' Value : '.$value.'<br />';
}
echo $str;
?>
<html>
<head>
<title>jQuery File Upload</title>
</head>
<body>
<form action="upload.php" method="POST" enctype="multipart/form-data">
<input type="text" name="myname" />
<input type="file" name="fileinfo" multiple="" />
<button type="submit">Submit</button>
</form>
<div id="result"></div>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
(function()
{
$('form').on('submit', function(e)
{
var theDiv = $('div#result');
var thisForm = $(this);
var action = thisForm.attr('action');
var method = thisForm.attr('method');
$.ajax(
{
url: action,
type: method,
data: new FormData(this),
processData: false,
contentType: false
}).done(function(datareceived)
{
thisForm.find('input, textarea').val('');
theDiv.html(datareceived);
});
e.preventDefault();
});
})();
</script>
</body>
</html>
To test if it works I use upload.php. See
<?php
$str = NULL;
foreach($_FILES as $file)
{
if(move_uploaded_file($file['tmp_name'], $file['name']) == FALSE)
{
$str .= $file['name'].' not uploaded<br />';
}
}
$str .= '<br />POST items include : <br />';
foreach($_POST as $postitem => $value)
{
$str .= 'Name : '.$postitem.' Value : '.$value.'<br />';
}
echo $str;
?>
Tuesday, 28 August 2012
Saving and retrieving images using MySQL through PHP
I really should have looked into this a long time ago, but still. The example below deliberately doesn't use jQuery. If you want to POST files through jQuery, you'll need to use an ajax form plugin.
Right. Now we've got that out of the way, to my example. I have created a database in MySQL with a table called pictures, and I have 2 fields:
id : int(8)
picture : longblob
I have used the database class which I developed earlier to handle the requests.
At this stage, I'm just handling JPEG images.
<?php
require_once 'database.class.php';
$db = new database;
if($_POST)
{
$image=$_FILES['uploadfile']['tmp_name'];
$fp = fopen($image, 'r');
$content = fread($fp, filesize($image));
$content = addslashes($content);
fclose($fp);
$sql="insert into pictures (picture) values ('$content')";
$results = $db->query($sql);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File upload</title>
</head>
<body>
<form enctype="multipart/form-data" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
<input name="uploadfile" id="uploadfile" type="file" />
<input type="submit" value="Submit" />
</form>
<div id="results">
<?php
$arr = $db->query('SELECT * FROM pictures');
if($arr)
{
foreach($arr as $row)
{
echo $row['id'];
echo '<img src="data:image/jpeg;base64,'.base64_encode($row['picture']).'" /><br />';
}
}
?>
</div>
</body>
</html>
Enjoy!
Right. Now we've got that out of the way, to my example. I have created a database in MySQL with a table called pictures, and I have 2 fields:
id : int(8)
picture : longblob
I have used the database class which I developed earlier to handle the requests.
At this stage, I'm just handling JPEG images.
<?php
require_once 'database.class.php';
$db = new database;
if($_POST)
{
$image=$_FILES['uploadfile']['tmp_name'];
$fp = fopen($image, 'r');
$content = fread($fp, filesize($image));
$content = addslashes($content);
fclose($fp);
$sql="insert into pictures (picture) values ('$content')";
$results = $db->query($sql);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>File upload</title>
</head>
<body>
<form enctype="multipart/form-data" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
<input name="uploadfile" id="uploadfile" type="file" />
<input type="submit" value="Submit" />
</form>
<div id="results">
<?php
$arr = $db->query('SELECT * FROM pictures');
if($arr)
{
foreach($arr as $row)
{
echo $row['id'];
echo '<img src="data:image/jpeg;base64,'.base64_encode($row['picture']).'" /><br />';
}
}
?>
</div>
</body>
</html>
Enjoy!
Thursday, 28 June 2012
OOP PHP POST handler in 2 parts
Actually, I'm wrong before I've even started. The class I give you below will also handle GET requests too. I've described it in 2 parts. The first is some HTML and jQuery which can be used to test the class. Then there is the class itself.
The HTML delivers a form with an input field and submit button. It also contains a jQuery call to the POST handler. Here, I pass the method within the class which will be called to handle the data. Then I pass the data. In this case, the contents of the input field. Finally, An alert catches any data coming back from the class.
The POST handler accepts the POST request as and converts it into an object. It checks to see if a method has been called and that the method exists. If so, the method is invoked. If not, an error message is returned.
Enjoy!
<!DOCTYPE html>
<html lang="en">
<head>
<title>Post test</title>
<style>
body
{
font-family:Sans-serif;
line-height:1.5em;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
</head>
<body>
<form>
<label for="myname">Type your name</label>
<input type="text" name="myname" id="myname" />
<button type="submit">Submit</button>
</form>
<script>
(function()
{
$('form').submit(function()
{
$.post('posthandler.php',
{
method:'getContent',
myname:$(this).find('#myname').val()
}, function(data)
{
alert(data)
});
return false;
});
})();
</script>
</body>
</html>
<?php
class posthandler
{
private $postObject;
function __construct($p)
{
$this->postObject = (object) $p;
if($this->postObject->method && (method_exists($this, $this->postObject->method)))
{
$evalStr = '$this->'.$this->postObject->method.'();';
eval($evalStr);
}
else
{
echo 'Invalid method supplied';
}
}
function getcontent()
{
echo $this->postObject->myname;
}
}
new posthandler($_POST);
?>
The HTML delivers a form with an input field and submit button. It also contains a jQuery call to the POST handler. Here, I pass the method within the class which will be called to handle the data. Then I pass the data. In this case, the contents of the input field. Finally, An alert catches any data coming back from the class.
The POST handler accepts the POST request as and converts it into an object. It checks to see if a method has been called and that the method exists. If so, the method is invoked. If not, an error message is returned.
Enjoy!
The HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Post test</title>
<style>
body
{
font-family:Sans-serif;
line-height:1.5em;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
</head>
<body>
<form>
<label for="myname">Type your name</label>
<input type="text" name="myname" id="myname" />
<button type="submit">Submit</button>
</form>
<script>
(function()
{
$('form').submit(function()
{
$.post('posthandler.php',
{
method:'getContent',
myname:$(this).find('#myname').val()
}, function(data)
{
alert(data)
});
return false;
});
})();
</script>
</body>
</html>
The Class
<?php
class posthandler
{
private $postObject;
function __construct($p)
{
$this->postObject = (object) $p;
if($this->postObject->method && (method_exists($this, $this->postObject->method)))
{
$evalStr = '$this->'.$this->postObject->method.'();';
eval($evalStr);
}
else
{
echo 'Invalid method supplied';
}
}
function getcontent()
{
echo $this->postObject->myname;
}
}
new posthandler($_POST);
?>
Tuesday, 12 October 2010
Put external web content into your page using jQuery and PHP
I looked into using the jQuery .load and .get methods to do this, but it only seemed to work with content on my server. I knew that PHP had a really good function called file_get_contents, so I thought, I'll use that, but jQuery is still good for putting the contents into your page. Here is an example of how they work together to achieve the goal.
See demo.
First the HTML file :
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>jQuery Loading External Content</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#container
{
background:#FF0000;
color:#FFFFFF;
width:400px;
height:400px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$('a').click(function()
{
$.post("getTheContent.php",
{
theAddress:$(this).attr('url')
}, function(data)
{
/* This is where you would manipulate the data before it is pushed into the div */
$('#container').html(data);
console.log(data);
});
return false;
});
});
</script>
</head>
<body>
<a url="http://htmldog.com/examples/textalign.html">first</a>
<a url="http://htmldog.com/examples/headings1.html">second</a>
<a url="http://htmldog.com/examples/superscript.html">third</a>
<a url="http://htmldog.com/examples/case.html">fourth</a>
<div id="container">
</div>
</body>
</html>
Now, the PHP file called getTheContent.php :
<?php
echo file_get_contents($_POST["theAddress"]);
?>
You can see that I am posting the value of the url descriptor from the anchor tag to the PHP file using jQuery. Then I echo the results back into jQuery and push it into the div.
See demo.
First the HTML file :
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset="UTF-8">
<title>jQuery Loading External Content</title>
<style type="text/css">
body
{
font-family:Sans-serif;
}
#container
{
background:#FF0000;
color:#FFFFFF;
width:400px;
height:400px;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$('a').click(function()
{
$.post("getTheContent.php",
{
theAddress:$(this).attr('url')
}, function(data)
{
/* This is where you would manipulate the data before it is pushed into the div */
$('#container').html(data);
console.log(data);
});
return false;
});
});
</script>
</head>
<body>
<a url="http://htmldog.com/examples/textalign.html">first</a>
<a url="http://htmldog.com/examples/headings1.html">second</a>
<a url="http://htmldog.com/examples/superscript.html">third</a>
<a url="http://htmldog.com/examples/case.html">fourth</a>
<div id="container">
</div>
</body>
</html>
Now, the PHP file called getTheContent.php :
<?php
echo file_get_contents($_POST["theAddress"]);
?>
You can see that I am posting the value of the url descriptor from the anchor tag to the PHP file using jQuery. Then I echo the results back into jQuery and push it into the div.
Subscribe to:
Posts (Atom)