jQuery Ajax POST方法

最新推荐文章于 2024-09-10 11:33:20 发布

cumi7754

最新推荐文章于 2024-09-10 11:33:20 发布

阅读量489

点赞数

文章标签： ajax python java jquery json ViewUI

原文链接：https://www.freecodecamp.org/news/jquery-ajax-post-method/

版权

Sends an asynchronous http POST request to load data from the server. Its general form is:

发送异步http POST请求以从服务器加载数据。其一般形式为：

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

url : is the only mandatory parameter. This string contains the adress to which to send the request. The returned data will be ignored if no other parameter is specified
url：是唯一的必需参数。此字符串包含向其发送请求的地址。如果未指定其他参数，则将忽略返回的数据
data : A plain object or string that is sent to the server with the request.
data：与请求一起发送到服务器的普通对象或字符串。
success : A callback function that is executed if the request succeeds.it takes as an argument the returned data. It is also passed the text status of the response.
成功：如果请求成功执行的回调函数，它将返回的数据作为参数。它还传递了响应的文本状态。
dataType : The type of data expected from the server. The default is Intelligent Guess (xml, json, script, text, html). if this parameter is provided, then the success callback must be provided as well.
dataType：服务器期望的数据类型。默认值为Intelligent Guess(xml，json，脚本，文本，html)。如果提供了此参数，则还必须提供成功回调。

例子 (Examples)

$.post('http://example.com/form.php', {category:'client', type:'premium'});

requests form.php from the server, sending additional data and ignoring the returned result

从服务器请求form.php ，发送其他数据并忽略返回的结果

$.post('http://example.com/form.php', {category:'client', type:'premium'}, function(response){ 
      alert("success");
      $("#mypar").html(response.amount);
});

requests form.php from the server, sending additional data and handling the returned response (json format). This example can be written in this format:

从服务器请求form.php ，发送其他数据并处理返回的响应(json格式)。该示例可以用以下格式编写：

$.post('http://example.com/form.php', {category:'client', type:'premium'}).done(function(response){
      alert("success");
      $("#mypar").html(response.amount);
});

The following example posts a form using Ajax and put results in a div

以下示例使用Ajax发布表单并将结果放入div中

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery.post demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.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>
// Attach a submit handler to the form
$( "#searchForm" ).submit(function( event ) {
 
  // Stop form from submitting normally
  event.preventDefault();
 
  // Get some values from elements on the page:
  var $form = $( this ),
    term = $form.find( "input[name='s']" ).val(),
    url = $form.attr( "action" );
 
  // Send the data using post
  var posting = $.post( url, { s: term } );
 
  // Put the results in a div
  posting.done(function( data ) {
    var content = $( data ).find( "#content" );
    $( "#result" ).empty().append( content );
  });
});
</script>
 
</body>
</html>

The following example use the github api to fetch the list of repositories of a user using jQuery.ajax() and put results in a div

以下示例使用github API使用jQuery.ajax()获取用户的存储库列表，并将结果放入div中

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery Get demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<form id="userForm">
  <input type="text" name="username" placeholder="Enter gitHub User name">
  <input type="submit" value="Search">
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>
 
<script>
// Attach a submit handler to the form
$( "#userForm" ).submit(function( event ) {
 
  // Stop form from submitting normally
  event.preventDefault();
 
  // Get some values from elements on the page:
  var $form = $( this ),
    username = $form.find( "input[name='username']" ).val(),
    url = "https://api.github.com/users/"+username+"/repos";
 
  // Send the data using post
  var posting = $.post( url, { s: term } );
 
  //Ajax Function to send a get request
  $.ajax({
    type: "GET",
    url: url,
    dataType:"jsonp"
    success: function(response){
        //if request if made successfully then the response represent the data

        $( "#result" ).empty().append( response );
    }
  });
  
});
</script>
 
</body>
</html>

jQuery.ajax() (jQuery.ajax())

$.post( url [, data ] [, success ] [, dataType ] ) is a shorthand Ajax function, equivalent to:

$.post( url [, data ] [, success ] [, dataType ] )是Ajax的简写功能，等效于：

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

$.ajax() provides way more options that can be found here

$.ajax()提供了更多可以在此处找到的选项

更多信息： (More Information:)

For more information, please visit the official website

欲了解更多信息，请访问官方网站

翻译自: https://www.freecodecamp.org/news/jquery-ajax-post-method/

cumi7754

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫