{"id":428,"date":"2023-08-25T17:22:38","date_gmt":"2023-08-25T17:22:38","guid":{"rendered":"\/\/api.jquery.com\/?p=428"},"modified":"2026-01-20T17:34:57","modified_gmt":"2026-01-20T17:34:57","slug":"jQuery.post","status":"publish","type":"post","link":"https:\/\/api.jquery.com\/jQuery.post\/","title":{"rendered":"jQuery.post()"},"content":{"rendered":"<article id=\"jQuery-post1\" class=\"entry method\"><h2 class=\"section-title\">\n<span class=\"name\">jQuery.post( url [, data ] [, success ] [, dataType ] )<\/span><span class=\"returns\">Returns: <a href=\"http:\/\/api.jquery.com\/Types\/#jqXHR\">jqXHR<\/a><\/span>\n<\/h2>\n<div class=\"entry-wrapper\">\n<p class=\"desc\"><strong>Description: <\/strong>Send data to the server using a HTTP POST request.<\/p>\n<ul class=\"signatures\">\n<li class=\"signature\">\n<h4 class=\"name\">\n<span class=\"version-details\">version added: <a href=\"\/category\/version\/1.0\/\">1.0<\/a><\/span><a id=\"jQuery-post-url-data-success-dataType\" href=\"#jQuery-post-url-data-success-dataType\"><span class=\"icon-link\"><\/span>jQuery.post( url [, data ] [, success ] [, dataType ] )<\/a>\n<\/h4>\n<ul>\n<li id=\"jQuery-post-url-data-success-dataType-url\">\n<div><strong>url<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>A string containing the URL to which the request is sent.<\/div>\n<\/li>\n<li id=\"jQuery-post-url-data-success-dataType-data\">\n<div><strong>data<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#PlainObject\">PlainObject<\/a> or <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>A plain object or string that is sent to the server with the request.<\/div>\n<\/li>\n<li id=\"jQuery-post-url-data-success-dataType-success\">\n<div><strong>success<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#Function\">Function<\/a>( <a href=\"http:\/\/api.jquery.com\/Types\/#PlainObject\">PlainObject<\/a> data, <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a> textStatus, <a href=\"http:\/\/api.jquery.com\/Types\/#jqXHR\">jqXHR<\/a> jqXHR )<\/div>\n<div>A callback function that is executed if the request succeeds. Required if <code>dataType<\/code> is provided, but can be <code>null<\/code> or <a href=\"\/jQuery.noop\/\"><code>jQuery.noop<\/code><\/a> as a placeholder. <strong>NOTE:<\/strong> In jQuery 3.x and older, when providing a <code>null<\/code> value for <code>success<\/code> you also have to provide the <code>data<\/code> parameter; you can set it to <code>undefined<\/code>.<\/div>\n<\/li>\n<li id=\"jQuery-post-url-data-success-dataType-dataType\">\n<div><strong>dataType<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#String\">String<\/a>\n<\/div>\n<div>The type of data expected from the server. Default: Intelligent Guess (xml, json, script, text, html).<\/div>\n<\/li>\n<\/ul>\n<\/li>\n<li class=\"signature\">\n<h4 class=\"name\">\n<span class=\"version-details\">version added: <a href=\"\/category\/version\/1.12-and-2.2\/\">1.12-and-2.2<\/a><\/span><a id=\"jQuery-post-settings\" href=\"#jQuery-post-settings\"><span class=\"icon-link\"><\/span>jQuery.post(  [settings ] )<\/a>\n<\/h4>\n<ul><li id=\"jQuery-post-settings-settings\">\n<div><strong>settings<\/strong><\/div>\n<div>Type: <a href=\"http:\/\/api.jquery.com\/Types\/#PlainObject\">PlainObject<\/a>\n<\/div>\n<div>A set of key\/value pairs that configure the Ajax request. All properties except for <code>url<\/code> are optional. A default can be set for any option with <a href=\"\/jQuery.ajaxSetup\/\">$.ajaxSetup()<\/a>. See <a href=\"\/jQuery.ajax\/#jQuery-ajax-settings\">jQuery.ajax( settings )<\/a> for a complete list of all settings. Type will automatically be set to <code>POST<\/code>.<\/div>\n<\/li><\/ul>\n<\/li>\n<\/ul>\n<div class=\"longdesc\" id=\"entry-longdesc\">\n    <p>This is a shorthand Ajax function, which is equivalent to:<\/p>\n    <div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$.ajax({<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">type<\/span>: <span class=\"hljs-string\">\"POST\"<\/span>,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">url<\/span>: url,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">data<\/span>: data,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">success<\/span>: success,<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-attr\">dataType<\/span>: dataType<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n    <p>The <code>success<\/code> callback function is passed the returned data, which will be an XML root element or a text string depending on the MIME type of the response. It is also passed the text status of the response.<\/p>\n    <p><strong>As of jQuery 1.5<\/strong>, the <code>success<\/code> callback function is also passed a <a href=\"#jqxhr-object\">\"jqXHR\" object<\/a> (in <strong>jQuery 1.4<\/strong>, it was passed the <code>XMLHttpRequest<\/code> object).<\/p>\n    <p>Most implementations will specify a success handler:<\/p>\n    <div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$.post( <span class=\"hljs-string\">\"ajax\/test.html\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> data <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  $( <span class=\"hljs-string\">\".result\"<\/span> ).html( data );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n    <p>This example fetches the requested HTML snippet and inserts it on the page.<\/p>\n    <p>Pages fetched with <code>POST<\/code> are never cached, so the <code>cache<\/code> and <code>ifModified<\/code> options in <code><a href=\"\/jQuery.ajaxSetup\/\">jQuery.ajaxSetup()<\/a><\/code> have no effect on these requests.<\/p>\n    <h4 id=\"jqxhr-object\">The jqXHR Object<\/h4>\n    <p><strong>As of jQuery 1.5<\/strong>, all of jQuery's Ajax methods return  a superset of the <code>XMLHTTPRequest<\/code> object. This jQuery XHR object, or \"jqXHR,\" returned by <code>$.post()<\/code> implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see <a href=\"\/category\/deferred-object\/\">Deferred object<\/a> for more information). The <code>jqXHR.done()<\/code> (for success), <code>jqXHR.fail()<\/code> (for error), and <code>jqXHR.always()<\/code> (for completion, whether success or error; added in jQuery 1.6) methods take a function argument that is called when the request terminates. For information about the arguments this function receives, see the <a href=\"\/jQuery.ajax\/#jqXHR\">jqXHR Object<\/a> section of the <code>$.ajax()<\/code> documentation.<\/p>\n        <p>The Promise interface also allows jQuery's Ajax methods, including <code>$.get()<\/code>, to chain multiple <code>.done()<\/code>, <code>.fail()<\/code>, and <code>.always()<\/code> callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately.<\/p>\n    <div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Assign handlers immediately after making the request,<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ and remember the jqxhr object for this request<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-keyword\">var<\/span> jqxhr = $.post( <span class=\"hljs-string\">\"example.php\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  alert( <span class=\"hljs-string\">\"success\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>})<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  .done(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    alert( <span class=\"hljs-string\">\"second success\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  })<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  .fail(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    alert( <span class=\"hljs-string\">\"error\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  })<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  .always(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    alert( <span class=\"hljs-string\">\"finished\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  });<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Perform other work here ...<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Set another completion function for the request above<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>jqxhr.always(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"><\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  alert( <span class=\"hljs-string\">\"second finished\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n\n    <h4>Deprecation Notice<\/h4>\n    <p>The <code>jqXHR.success()<\/code>, <code>jqXHR.error()<\/code>, and <code>jqXHR.complete()<\/code> callback methods are <strong>removed as of jQuery 3.0<\/strong>. You can use <code>jqXHR.done()<\/code>, <code>jqXHR.fail()<\/code>, and <code>jqXHR.always()<\/code> instead.<\/p>\n  <\/div>\n<h3>Additional Notes:<\/h3>\n<div class=\"longdesc\"><ul>\n<li>\n\t\t\tDue to browser security restrictions, most \"Ajax\" requests are subject to the <a title=\"Same Origin Policy on Wikipedia\" href=\"https:\/\/en.wikipedia.org\/wiki\/Same_origin_policy\">same origin policy<\/a>; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.\n\t\t<\/li>\n<li>\n\t\t\tIf a request with jQuery.post() returns an error code, it will fail silently unless the script has also called the global <a href=\"\/ajaxError\/\"><code>ajaxError<\/code><\/a> event. Alternatively, as of jQuery 1.5, the <code>.error()<\/code> method of the <code>jqXHR<\/code> object returned by jQuery.post() is also available for error handling.\n\t\t<\/li>\n<\/ul><\/div>\n<section class=\"entry-examples\" id=\"entry-examples\"><header><h2>Examples:<\/h2><\/header><div class=\"entry-example\" id=\"example-0\">\n<h3>\n\t\t\t\tExample 1<\/h3>\n<p>Request the test.php page, but ignore the return results.<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$.post( <span class=\"hljs-string\">\"test.php\"<\/span> );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div class=\"entry-example\" id=\"example-1\">\n<h3>\n\t\t\t\tExample 2<\/h3>\n<p>Request the test.php page and send some additional data along (while still ignoring the return results).<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$.post( <span class=\"hljs-string\">\"test.php\"<\/span>, { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"John\"<\/span>, <span class=\"hljs-attr\">time<\/span>: <span class=\"hljs-string\">\"2pm\"<\/span> } );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div class=\"entry-example\" id=\"example-2\">\n<h3>\n\t\t\t\tExample 3<\/h3>\n<p>Pass arrays of data to the server (while still ignoring the return results).<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$.post( <span class=\"hljs-string\">\"test.php\"<\/span>, { <span class=\"hljs-string\">'choices[]'<\/span>: [ <span class=\"hljs-string\">\"Jon\"<\/span>, <span class=\"hljs-string\">\"Susan\"<\/span> ] } );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div class=\"entry-example\" id=\"example-3\">\n<h3>\n\t\t\t\tExample 4<\/h3>\n<p>Send form data using Ajax requests<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$.post( <span class=\"hljs-string\">\"test.php\"<\/span>, $( <span class=\"hljs-string\">\"#testform\"<\/span> ).serialize() );<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div class=\"entry-example\" id=\"example-4\">\n<h3>\n\t\t\t\tExample 5<\/h3>\n<p>Alert the results from requesting test.php (HTML or XML, depending on what was returned).<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$.post( <span class=\"hljs-string\">\"test.php\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> data <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  alert( <span class=\"hljs-string\">\"Data Loaded: \"<\/span> + data );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>});<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div class=\"entry-example\" id=\"example-5\">\n<h3>\n\t\t\t\tExample 6<\/h3>\n<p>Alert the results from requesting test.php with an additional payload of data (HTML or XML, depending on what was returned).<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$.post( <span class=\"hljs-string\">\"test.php\"<\/span>, { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"John\"<\/span>, <span class=\"hljs-attr\">time<\/span>: <span class=\"hljs-string\">\"2pm\"<\/span> })<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  .done(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> data <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    alert( <span class=\"hljs-string\">\"Data Loaded: \"<\/span> + data );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  });<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div class=\"entry-example\" id=\"example-6\">\n<h3>\n\t\t\t\tExample 7<\/h3>\n<p>Post to the test.php page and get content which has been returned in json format (&lt;?php echo json_encode(array(\"name\"=&gt;\"John\",\"time\"=&gt;\"2pm\")); ?&gt;).<\/p>\n<div class=\"syntaxhighlighter javascript\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code>$.post( <span class=\"hljs-string\">\"test.php\"<\/span>, { <span class=\"hljs-attr\">func<\/span>: <span class=\"hljs-string\">\"getNameAndTime\"<\/span> }, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> data <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-built_in\">console<\/span>.log( data.name ); <span class=\"hljs-comment\">\/\/ John<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-built_in\">console<\/span>.log( data.time ); <span class=\"hljs-comment\">\/\/ 2pm<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>}, <span class=\"hljs-string\">\"json\"<\/span>);<\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<\/div>\n<div class=\"entry-example\" id=\"example-7\">\n<h3>\n\t\t\t\tExample 8<\/h3>\n<p>Post a form using Ajax and put results in a div<\/p>\n<div class=\"syntaxhighlighter xml\">\n\t<table>\n\t\t<tbody>\n\t\t\t<tr>\n\t\t\t\t\n\t\t\t\t<td class=\"gutter\">\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n1\">1<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n2\">2<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n3\">3<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n4\">4<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n5\">5<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n6\">6<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n7\">7<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n8\">8<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n9\">9<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n10\">10<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n11\">11<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n12\">12<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n13\">13<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n14\">14<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n15\">15<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n16\">16<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n17\">17<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n18\">18<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n19\">19<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n20\">20<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n21\">21<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n22\">22<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n23\">23<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n24\">24<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n25\">25<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n26\">26<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n27\">27<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n28\">28<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n29\">29<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n30\">30<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n31\">31<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n32\">32<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n33\">33<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n34\">34<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n35\">35<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n36\">36<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n37\">37<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n38\">38<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n39\">39<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n40\">40<\/div>\n\t\t\t\t\t\n\t\t\t\t\t\t<div class=\"line n41\">41<\/div>\n\t\t\t\t\t\n\t\t\t\t<\/td>\n\t\t\t\t\n\t\t\t\t<td class=\"code\">\n\t\t\t\t\t<pre><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-meta\">&lt;!doctype <span class=\"hljs-meta-keyword\">html<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">html<\/span> <span class=\"hljs-attr\">lang<\/span>=<span class=\"hljs-string\">\"en\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">meta<\/span> <span class=\"hljs-attr\">charset<\/span>=<span class=\"hljs-string\">\"utf-8\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">title<\/span>&gt;<\/span>jQuery.post demo<span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">title<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span> <span class=\"hljs-attr\">src<\/span>=<span class=\"hljs-string\">\"https:\/\/code.jquery.com\/jquery-4.0.0.js\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">head<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">form<\/span> <span class=\"hljs-attr\">action<\/span>=<span class=\"hljs-string\">\"\/\"<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"searchForm\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"text\"<\/span> <span class=\"hljs-attr\">name<\/span>=<span class=\"hljs-string\">\"s\"<\/span> <span class=\"hljs-attr\">placeholder<\/span>=<span class=\"hljs-string\">\"Search...\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">input<\/span> <span class=\"hljs-attr\">type<\/span>=<span class=\"hljs-string\">\"submit\"<\/span> <span class=\"hljs-attr\">value<\/span>=<span class=\"hljs-string\">\"Search\"<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">form<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">&lt;!-- the result of the search will be rendered inside this div --&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\">\"result\"<\/span>&gt;<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\"><\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-comment\">\/\/ Attach a submit handler to the form<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>$( <span class=\"hljs-string\">\"#searchForm\"<\/span> ).on( <span class=\"hljs-string\">\"submit\"<\/span>, <span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> event <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-comment\">\/\/ Stop form from submitting normally<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  event.preventDefault();<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-comment\">\/\/ Get some values from elements on the page:<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-keyword\">var<\/span> $form = $( <span class=\"hljs-built_in\">this<\/span> ),<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    term = $form.find( <span class=\"hljs-string\">\"input[name='s']\"<\/span> ).val(),<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    url = $form.attr( <span class=\"hljs-string\">\"action\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-comment\">\/\/ Send the data using post<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-keyword\">var<\/span> posting = $.post( url, { <span class=\"hljs-attr\">s<\/span>: term } );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  <span class=\"hljs-comment\">\/\/ Put the results in a div<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  posting.done(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function<\/span>(<span class=\"hljs-params\"> data <\/span>) <\/span>{<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    <span class=\"hljs-keyword\">var<\/span> content = $( data ).find( <span class=\"hljs-string\">\"#content\"<\/span> );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>    $( <span class=\"hljs-string\">\"#result\"<\/span> ).empty().append( content );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>  } );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code>} );<\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code> <\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">body<\/span>&gt;<\/span><\/code><\/div><\/div><div class=\"container\"><div class=\"line\"><code><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">html<\/span>&gt;<\/span><\/code><\/div><\/div><\/pre>\n\t\t\t\t<\/td>\n\t\t\t<\/tr>\n\t\t<\/tbody>\n\t<\/table>\n<\/div>\n\n<h4>Demo:<\/h4>\n<div class=\"demo code-demo\"><\/div>\n<\/div><\/section>\n<\/div><\/article>","protected":false},"excerpt":{"rendered":"<p>Send data to the server using a HTTP POST request.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,78,101,93],"tags":[],"class_list":["post-428","post","type-post","status-publish","format-standard","hentry","category-shorthand-methods","category-78","category-112-and-22","category-93"],"_links":{"self":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/428","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/comments?post=428"}],"version-history":[{"count":6,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/428\/revisions"}],"predecessor-version":[{"id":1568,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/posts\/428\/revisions\/1568"}],"wp:attachment":[{"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/media?parent=428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/categories?post=428"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/api.jquery.com\/wp-json\/wp\/v2\/tags?post=428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}