Issue on Posting HTML Content Using jQuery - Ajax Post Method
Question
I am trying to POST a div section to a new page using jquery ajax as:
<!DOCTYPE html>
<body>
<div id="edit_content">
<p>This is a test</p>
</div>
<a href="out.php" id="submit_script">Submit</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var htmlData = $('#edit_content').html();
$.post('out.php', {'html': htmlData },function(){
});
});
</script>
</body>
</html>
and in the out.php page I have:
<?php
$content = $_POST['html'];
echo $content;
but when I run the code I am getting this error:
Notice: Undefined index: html in G:\\Apps\\out.php on line 2
can you please let me know why this is happening and how I can stop it?
3 answers
solution1
1 2014-04-25 20:05:41
Your $.post function has a typo in the data field, try this instead:
$.post('out.php', {html: htmlData }, function(response){
Since you are sending an object, the key does not need quotes.
or better yet, but all your data ouside and juste reference them in your post:
var postData = {html: $('#edit_content').html() }
$.post('out.php', postData, function(response){
solution2
1 2014-04-25 21:43:41
Your code works as it is - at least in terms of the post. To illustrate this change it to the following (the only change is to actuallly do something with the response to the ajax request):
<!DOCTYPE html>
<body>
<div id="edit_content">
<p>This is a test</p>
</div>
<a href="out.php" id="submit_script">Submit</a>
<div id="out"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var htmlData = $('#edit_content').html();
$.post('out.php', {'html': htmlData }, function(data){
$('#out').html(data);
});
});
</script>
</body>
</html>
I think you need to explain what you are trying to do (or what you are expecting to see). As your code stands you are running the ajax request as soon as the page loads (in document ready) but not doing anything with the response. You then have a link to the out.php ( <a href="out.php" id="submit_script">Submit</a> ). Are you expecting to see the result in out.php when you click the link? If so then that isn't going to happen. What is happening is that when the page loads it runs a request to out.php with the post data and gets a response (which it then ignores). When you click the link you run a new request to out.php without the post data so you see nothing.
If I have guessed right then you want to replace the link with a form submission triggered by the click of the link (with the data fetched first). Something like
<!DOCTYPE html>
<body>
<div id="edit_content">
<p>This is a test</p>
</div>
<a href="#" id="submit_script">Submit</a>
<form action="out.php" method="post" id="out-form" style="display: none;">
<input type="hidden" id="hidden-html" name="html" value="" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$('#submit_script').click(function(){
$('#hidden-html').val($('#edit_content').html());
$('#out-form').submit();
return false;
})
});
</script>
</body>
</html>
solution3
0 2014-04-25 20:03:41
The 'html' data is not being posted to your php page. Change your php file to this:
<?php
if(isset($_POST['html']))
{
$content = $_POST['html'];
echo $content;
}
?>
This should stop the error and at least point you in the right direction. Without more code, I am not able to tell you why the 'html' data is not being posted.
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.