Ajax related functions

Ajax related functions

jQuery provides some related functions to assist Ajax functions.

1. jQuery.ajaxSetup( options )

No return value

Description:

Settings Global AJAX default options options.

Explanation:

Sometimes we want to set the default behavior of all Ajax attributes on the page. Then you can use this function to set the options, and then the default options of all Ajax requests will be changed.

For example, when the page is loaded, I use the following code to set the default option of Ajax:

$.ajaxSetup({    url: "../data/AjaxGetMethod.aspx",    data: { "param": "ziqiu.zhang" },    global: false,    type: "POST",    success: function(data, textStatus) { $("#divResult").html(data); }});
此后我们可以使用无参数的get(),post()或者ajax()方法发送 ajax 请求.完整的示例代码如下:
<!doctype html><html><head>
 <meta charset="utf-8"/>
 <title>jQuery Ajax - Load</title>
 <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
 <script>
   $(document).ready(function() {
     $.ajaxSetup({
         url: "../data/AjaxGetMethod.aspx",
         data: { "param": "ziqiu.zhang" },
         global: false,
         type: "POST",
         success: function(data, textStatus) {
           $("#divResult").html(data);
         }
     });
     $("#btnAjax").click(function(event) { $.ajax(); });
     $("#btnGet").click(function(event) { $.get(); });
     $("#btnPost").click(function(event) { $.post(); });
     $("#btnGet2").click(function(event) { $.get("../data/AjaxGetMethod.aspx",{ "param": "other" }); });
   });  </script></head>  <body>    
 <button id="btnAjax">nontransfer param call ajax() method</button><br />
 <button id="btnGet">nontransfer param call get() method</button><br />
 <button id="btnPost">nontransfer param call post() method</button><br />
 <button id="btnGet2">transfer param call get() method , use global default callback</button><br />
 <br />
 <div id="divResult"></div>
</body>
</html>

Note that when using the get() or post() method, except the type parameter will be reset Except for GET or POST, other parameters will use the default global option as long as they are not passed. If a certain option is passed, for example, the last button passes the url and parameters, then this call will be based on the passed option. Options that are not passed, such as callback functions, will still use the global option to set the value.

2.serialize( )

Returns: String

Description:

Sequence table table content Is a string, used for Ajax requests.

Serialization is most commonly used when sending form data to the server. The serialized data is in a standard format and can be supported by almost all servers.

In order to work as normally as possible, the form fields being serialized are required to have name attributes. Only one eid will not work.

Write the name attribute like this: <input id="email" name="email" type="text" />

Explanation:

serialize() The function concatenates the form objects in the form to be sent to the server into a string. It is convenient for us to obtain form data when sending using Ajax. This is similar to when a form is submitted via Get method, the name/value of the form object is automatically placed on the URL for submission.

3.serializeArray( )

Returns: Array< Object>

Description:

Use This function obtains a JSON object, but jQuery does not provide a method to convert a JSON object into a JSON string. Therefore, we need to use plug-ins, such as the jquery.json plug-in mentioned in the original article

Continuing Learning

new file

<html> <head> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").text($("form").serialize()); }); }); </script> </head> <body> <form action=""> 姓名: <input type="text" name="FirstName" value="Bill" /><br /> 职位: <input type="text" name="LastName" value="Gates" /><br /> </form> <button>序列化表单值</button> <div></div> </body> </html>

submit Reset Code

Automatic operation

Ajax related functions

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]