jQuery之$.post()

在提交表单时我们可以使用.submit()方法自定义提交表单的动作。提交的方式可以选择get、post、getJSON、getJSONP等等。这里说一下post方式。

jQuery.post( url [, data ] [, success(data, textStatus, jqXHR) ] [, dataType ] )

url：要提交的地址，相当于html中的action值。

data：要发送给服务器的数据。

success：这是一个回调函数，如果post成功，会执行该函数。

dataType：这个参数可以设置从服务器返回的数据的格式，可以为xml, json, script, text, html。

使用示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.post demo</title>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
  <form action="/" id="searchForm">
   <input type="text" name="s" placeholder="Search..." />
   <input type="submit" value="Search" />
  </form>
  <!-- the result of the search will be rendered inside this div -->
  <div id="result"></div>
 
<script>
/* 使用submit()自定义提交动作 */
$("#searchForm").submit(function(event) {
 
  /* 阻止form正常的提交，使用自定义方式 */
  event.preventDefault();
 
  /* 提取html中的某些元素，这里是要post的数据和地址 */
  var $form = $( this ),
      term = $form.find( 'input[name="s"]' ).val(),
      url = $form.attr( 'action' );
 
  /* 发送数据，使用了url和data这两个参数，后者用字典形式 */
  var posting = $.post( url, { s: term } );
 
  /* 提交成功后的操作，将返回的数据显示在一个div中 */
  posting.done(function( data ) {
    var content = $( data ).find( '#content' );
    $( "#result" ).empty().append( content );
  });
});
</script>
 
</body>
</html>

在使用chrome浏览器进行调试时发现一个问题，如果url为http或https，而本文件是在本地打开，post就会失败。这是因为chrome出于安全考虑不支持跨域（file和http）访问。解决的办法，一是用python -m SimpleHTTPServer 8000开一个临时的http服务器，一是使用get而非post。

Comments

▲