uTools-Manuals/docs/jQuery/jQuery.post.html

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">jQuery.post()</h1>
<div class="entry-meta">
						所属分类：<span class="category"><a href="/category/ajax/">Ajax</a> &gt; <a href="/category/ajax/shorthand-methods/">快捷方法</a></span>
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/jQuery.post/" target="_blank">jQuery.post()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="jQuery-post1"><h2 class="section-title">
<span class="name">jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )</span><span class="returns">返回: <a href="/Types/#jqXHR">jqXHR</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>使用一个HTTP POST 请求从服务器加载数据。
			</p>
<ul class="signatures"><li class="signature" id="jQuery-post-url-data-successdata--textStatus--jqXHR-dataType">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.0/">1.0</a></span>jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )</h4>
<ul>
<li>
<div><strong>url</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>一个包含发送请求的URL字符串</div>
</li>
<li>
<div><strong>data</strong></div>
<div>类型: <a href="/Types/#PlainObject,%20String">PlainObject, String</a>
</div>
<div>发送给服务器的字符串或Key/value键值对。</div>
</li>
<li>
<div><strong>success(data, textStatus, jqXHR)</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>当请求成功后执行的回调函数。</div>
</li>
<li>
<div><strong>dataType</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>从服务器返回的预期的数据类型。默认：智能判断（xml, json, script, or html）。</div>
</li>
</ul>
</li></ul>
<div class="longdesc" id="entry-longdesc">
<p>这是一个 Ajax 函数的简写形式，这相当于：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.ajax({</code></div></div><div class="container"><div class="line"><code>  type: <span class="string">"POST"</span>,</code></div></div><div class="container"><div class="line"><code>  url: url,</code></div></div><div class="container"><div class="line"><code>  data: data,</code></div></div><div class="container"><div class="line"><code>  success: success,</code></div></div><div class="container"><div class="line"><code>  dataType: dataType</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p><code>success</code>回调函数会传入返回的数据，是根据MIME类型的响应，它可能返回的数据类型包括XML根节点, 字符串, JavaScript 文件, 或者 JSON 对象。 同时还会传入描述响应状态的字符串。</p>
<p><strong>从 jQuery 1.5开始</strong>，<code>success</code>回调函数还传递一个<a href="/jQuery.get/#jqxhr-object">“jqXHR”对象</a> （ <strong>在</strong> jQuery <strong>1.4中</strong> ，它传递的是<code>XMLHttpRequest</code>对象）。</p>
<p>大多数实现将指定一个成功的处理函数：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.post(<span class="string">'ajax/test.html'</span>, <span class="keyword">function</span>(data) {</code></div></div><div class="container"><div class="line"><code>  $(<span class="string">'.result'</span>).html(data);</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>这个例子所请求的全部HTML代码片段插入到页面中。</p>
<p>用 <code>POST</code> 获取的页面是从来不会被缓存, 所以这些请求中的 <code>cache</code> 和 <code>ifModified</code> 选项在 <code><a href="/jQuery.ajaxSetup">jQuery.ajaxSetup()</a></code> 是无效的。</p>
<h4 id="jqxhr-object">The jqXHR Object（jqXHR 对象）</h4>
<p><strong>从jQuery 1.5开始</strong>，所有jQuery的Ajax方法都返回一个<code>XMLHTTPRequest</code>对象的超集。这个通过<code>$.get()</code>方法返回的jQuery XHR对象，或“jqXHR，”实现了 Promise 接口，使它拥有 Promise 的所有属性，方法和行为（见<a href="/category/deferred-object/">Deferred object</a>获取更多信息）。<code>jqXHR.done()</code> (表示成功), <code>jqXHR.fail() (表示错误)</code>, 和 <code>jqXHR.always()</code> (表示完成, 无论是成功或错误) 方法接受一个函数参数，用来请求终止时被调用。关于这个函数接收参数的详细信息，请参阅 <a href="/jQuery.ajax/#jqXHR">jqXHR Object</a> 文档中的 $.ajax() 章节。</p>
<p>Promise 接口也允许jQuery的Ajax方法, 包括 <code>$.get()</code>, 在一个单独的请求中关联到 <code>.done()</code>, <code>.fail()</code>, 和 <code>.always()</code> 回调函数， 甚至允许你在请求已经结束后，指派回调函数。如果该请求已经完成，则回调函数会被立刻调用。</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="comment">// Assign handlers immediately after making the request,</span></code></div></div><div class="container"><div class="line"><code>    <span class="comment">// and remember the jqxhr object for this request</span></code></div></div><div class="container"><div class="line"><code>    <span class="keyword">var</span> jqxhr = $.post(<span class="string">"example.php"</span>, <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>      alert(<span class="string">"success"</span>);</code></div></div><div class="container"><div class="line"><code>    })</code></div></div><div class="container"><div class="line"><code>    .success(<span class="keyword">function</span>() { alert(<span class="string">"second success"</span>); })</code></div></div><div class="container"><div class="line"><code>    .error(<span class="keyword">function</span>() { alert(<span class="string">"error"</span>); })</code></div></div><div class="container"><div class="line"><code>    .complete(<span class="keyword">function</span>() { alert(<span class="string">"complete"</span>); });</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>    <span class="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="comment">// Set another completion function for the request above</span></code></div></div><div class="container"><div class="line"><code>    jqxhr.complete(<span class="keyword">function</span>(){ alert(<span class="string">"second complete"</span>); });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Deprecation Notice（推荐使用的注意事项：）</h4>
<p><code>jqXHR.success()</code>, <code>jqXHR.error()</code>, 和 <code>jqXHR.complete()</code> 回调方法 在jQuery 1.5中引进， <strong>在jQuery 1.8中不赞成使用，已经过时</strong>。他们最终将被取消（移除），你的代码应该为次做好准备，使用 <code>jqXHR.done()</code>, <code>jqXHR.fail()</code>, 和 <code>jqXHR.always()</code> 代替.</p>
</div>
<h3>Additional Notes:（其他注意事项：）</h3>
<div class="longdesc">
<ul>
<li> 由于浏览器的安全限制，大多数“Ajax”的要求，均采用<a href="http://en.wikipedia.org/wiki/Same_origin_policy" title="维基百科上的同源策略">同一起源的政策</a> ;即无法从不同的域，子域或协议中正确接收数据。</li>
<li>如果一个jQuery.post（）请求返回一个错误代码，它会静静的失败，除非脚本调用全局的<a href="/ajaxError">.ajaxError（）</a>方法。在jQuery 1.5， 通过jQuery.post()返回的<code>jqXHR</code>对象的<code>.error()</code>方法也可用于错误处理。</li>
</ul>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4>Example: <span class="desc">请求 test.php 页面, 但是忽略返回结果</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.post(<span class="string">"test.php"</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-1">
<h4>Example: <span class="desc">请求 test.php 页面 并且发送url参数(虽然仍然忽视返回的结果)。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.post(<span class="string">"test.php"</span>, { name: <span class="string">"John"</span>, time: <span class="string">"2pm"</span> } );</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-2">
<h4>Example: <span class="desc">传递数组形式data参数给服务器 (虽然仍然忽视返回的结果)。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.post(<span class="string">"test.php"</span>, { <span class="string">'choices[]'</span>: [<span class="string">"Jon"</span>, <span class="string">"Susan"</span>] });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-3">
<h4>Example: <span class="desc">使用Ajax请求发送表单数据。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.post(<span class="string">"test.php"</span>, $(<span class="string">"#testform"</span>).serialize());</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-4">
<h4>Example: <span class="desc">Alert 从 test.php请求的数据结果 (HTML 或者 XML,取决于返回的结果)。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.post(<span class="string">"test.php"</span>, <span class="keyword">function</span>(data) {</code></div></div><div class="container"><div class="line"><code>  alert(<span class="string">"Data Loaded: "</span> + data);</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-5">
<h4>Example: <span class="desc">Alert 从 test.cgi请求并且发送url参数的数据结果 (HTML 或者 XML,取决于返回的结果)。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.post(<span class="string">"test.php"</span>, { name: <span class="string">"John"</span>, time: <span class="string">"2pm"</span> },</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">function</span>(data) {</code></div></div><div class="container"><div class="line"><code>    alert(<span class="string">"Data Loaded: "</span> + data);</code></div></div><div class="container"><div class="line"><code>  });</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-6">
<h4>Example: <span class="desc">得到test.php的内容，存储在一个 XMLHttpResponse 对象中并且运用 process() JavaScript函数。</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.post(<span class="string">"test.php"</span>, { name: <span class="string">"John"</span>, time: <span class="string">"2pm"</span> },</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">function</span>(data) {</code></div></div><div class="container"><div class="line"><code>    process(data);</code></div></div><div class="container"><div class="line"><code>  },</code></div></div><div class="container"><div class="line"><code> <span class="string">"xml"</span></code></div></div><div class="container"><div class="line"><code>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-7">
<h4>Example: <span class="desc">Posts to the test.php page and gets contents which has been returned in json format (&lt;?php echo json_encode(array("name"=&gt;"John","time"=&gt;"2pm")); ?&gt;).</span>
</h4>
<div class="syntaxhighlighter javascript ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$.post(<span class="string">"test.php"</span>, { <span class="string">"func"</span>: <span class="string">"getNameAndTime"</span> },</code></div></div><div class="container"><div class="line"><code>  <span class="keyword">function</span>(data){</code></div></div><div class="container"><div class="line"><code>    console.log(data.name); <span class="comment">// John</span></code></div></div><div class="container"><div class="line"><code>    console.log(data.time); <span class="comment">//  2pm</span></code></div></div><div class="container"><div class="line"><code>  }, <span class="string">"json"</span>);</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="entry-example" id="example-8">
<h4>Example: <span class="desc">用ajax传递一个表单并把结果在一个div中</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
<div class="line n31">31</div>
<div class="line n32">32</div>
<div class="line n33">33</div>
<div class="line n34">34</div>
<div class="line n35">35</div>
<div class="line n36">36</div>
<div class="line n37">37</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">form</span> <span class="attribute">action</span>=<span class="value">"/"</span> <span class="attribute">id</span>=<span class="value">"searchForm"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>   <span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"text"</span> <span class="attribute">name</span>=<span class="value">"s"</span> <span class="attribute">placeholder</span>=<span class="value">"Search..."</span> /&gt;</span></code></div></div><div class="container"><div class="line"><code>   <span class="tag">&lt;<span class="title">input</span> <span class="attribute">type</span>=<span class="value">"submit"</span> <span class="attribute">value</span>=<span class="value">"Search"</span> /&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;/<span class="title">form</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="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="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"result"</span>&gt;</span><span class="tag">&lt;/<span class="title">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="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code><span class="comment">/* attach a submit handler to the form */</span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"#searchForm"</span>).submit(<span class="keyword">function</span>(event) {</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>  <span class="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="comment">/* get some values from elements on the page: */</span></code></div></div><div class="container"><div class="line"><code>  <span class="keyword">var</span> $form = $( <span class="keyword">this</span> ),</code></div></div><div class="container"><div class="line"><code>      term = $form.find( <span class="string">'input[name="s"]'</span> ).val(),</code></div></div><div class="container"><div class="line"><code>      url = $form.attr( <span class="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="comment">/* Send the data using post and put the results in a div */</span></code></div></div><div class="container"><div class="line"><code>  $.post( url, { s: term },</code></div></div><div class="container"><div class="line"><code>    <span class="keyword">function</span>( data ) {</code></div></div><div class="container"><div class="line"><code>        <span class="keyword">var</span> content = $( data ).find( <span class="string">'#content'</span> );</code></div></div><div class="container"><div class="line"><code>        $( <span class="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>});</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">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="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></section>
</div></article> </div>
</article>