Codelab Editor
Free Online HTML Editor
Run
Learn jQuery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>jQuery $.post() Example – Load External HTML | TutsInsider</title> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <style> body { font-family: Arial, sans-serif; background: #f9f9f9; padding: 30px; } h2 { color: #2a73cc; } #loadContent { background: #2a73cc; color: #fff; border: none; padding: 10px 20px; cursor: pointer; margin-bottom: 20px; font-size: 16px; } #target { border: 1px solid #ccc; background: #fff; padding: 15px; } </style> </head> <body> <h2>jQuery AJAX $.post() Method</h2> <p>Click the button to send a POST request and display the response content.</p> <button id="loadContent">Load Employee Data</button> <div id="target"> The employees' Data will appear in this box. </div> <script> $(function () { $('#loadContent').on('click', function () { $.post('demo-content.html', {}, function (response) { $('#target').html(response); }).fail(function () { $('#target').html('Error loading data.'); }); }); }); </script> </body> </html>
Editor Commands
Ctrl
F
Find
Ctrl
G
Find Next
Ctrl
⇧
G
Find Previous
Ctrl
⇧
F
Find & Replace
Ctrl
]
Indent Code Right
Ctrl
[
Indent Code Left
⇧
Tab
Auto Indent Code
Ctrl
/
Line Comment
Ctrl
Alt
/
Block Comment
TutsInsider Actions
Alt
S
Run Code
Ctrl
C
Copy Editor Code
Ctrl
A
Select All Editor Code
Ctrl
S
Save/Download
Ctrl
Alt
X
Rotate
Ctrl
Alt
T
Switch Theme
Ctrl
⇧
C
Open Console
Esc
Close Console