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 normallyevent.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 postvar posting = $.post( url, { s: term } );// Put the results in a divposting.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 normallyevent.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 postvar 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/