How To : Get Specific Div From AJAX Response

How To : Get Specific Div From AJAX Response

Nowadays, We like to use jQuery to submit forms or use AJAX for many small small things,

But sometimes we need only specific div to perform action or do something but the problem is AJAX returns full page data in response,

getAjax.php :

<html>
    <div class='class1'>
    	Class1
    </div>

    <div id="id1">
    	Id1
    </div>

    <div class='class1'>
    	Again Class 1
    </div>
</html>

Suppose you’re calling ajax to getAjax.php from index.html and you want only “.class1” content in response to append in “#main”,

Here’s the code :

index.html :

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
	$(document).ready(function(){
		$.post("getAjax.php",{},function(response){
			$(response).find('.class1').each(function(){
				$('#main').append($(this).html());
			});
		});
	});
</script>
</head>
<body>
    <div id="main">
    Hello...
    </div>
</body>
</html>

Leave a Reply:

Your email address will not be published. Required fields are marked *