How to send GET/POST request using Javascript? (detailed examples)

This article brings you relevant knowledge on how to use Javascript to send GET/POST requests. If you only use form submission, the background needs to make very complex judgments. Let's take a look at how to use JavaScript to submit. I hope everyone has to help.

JQuery-based GET/POST data submission method

If you are new to Javascript, you may be completely confused about JQuery like me. , so it is appropriate to popularize JQuery as a fast and concise JavaScript framework. It is another excellent JavaScript code library (or JavaScript framework) after Prototype. The design purpose of JQuery is "write less, do more", which means writing less code and doing more things.

It encapsulates common JavaScript function codes, provides a simple JavaScript design pattern, and optimizes HTML document operations, event processing, animation design and Ajax interaction. The core features of JQuery can be summarized as follows: it has a unique chain syntax and a short and clear multi-functional interface; it has an efficient and flexible css selector that can be extended; it has a convenient plug-in extension mechanism and rich plug-ins. jQuery is compatible with various mainstream browsers, such as IE 6.0, FF 1.5, Safari 2.0, Opera 9.0, etc.

The official website address of JQuery, you can click to visit. According to the official version, the latest one has reached v3.2.1, so it is recommended to consider downloading the latest JQuery from the official website to get more features.

JQuery is very powerful, but all it needs to implement the current function is two simple APIs. You can click to view the complete API documentation. In addition, there are also learning materials about Javascript on runnoob.com.

$.get(url, data, callback)

Parameters	Description
url	Required, specifies the URL you need to request
data	Optional, specifies the data sent to the server along with the request, the format is json
callback	Optional, callback function, the function to be run when the request is successful

$. post(url, data, callback)

Parameter	Description
url	Required, specifies the URL you need to request
data	Optional, specifies the data sent to the server along with the request, the format is json
callback	Optional, callback function, function to be run when the request is successful

The usage method is like this, first, when needed In the page that calls JQuery, use the script tag to import the Jquery file, for example:

	<script src="static/js/jquery-3.2.1.min.js"></script>

Then, in the blank space of the web page, declare your method and the parameters that need to be passed. You can do this:

	<script>
		function doPost(url)
		{
			var val1 = document.getElementsByName("key1").value;
			var val2 = document.getElementsByName("key2").value;

			$.post(url, {'key1':val1, 'key2':val2});
		}
	</script>

Next, add an onclick attribute to your input/button tag or where you need to send data, for example:

	...
	<input type="button" value="submit" onclick="doPost(&#39;/&#39;)" />
	...

Then you can use JQuery to send data.

Another method is to construct a form and use the form to submit.

Use Javascript/form to submit GET/POST data submission method

/*
* @url: url link
* @action: "get", "post"
* @json: {'key1':'value2', 'key2':'value2'} 
*/
function doFormRequest(url, action, json)
{
    var form = document.createElement("form");
    form.action = url;
    form.method = action;

    // append input attribute and valus
    for (var key in json)
    {
        if (json.hasOwnProperty(key))
        {
            var val = json[key];
            input = document.createElement("input");
            input.type = "hidden";
            input.name = key;
            input.value = val;

            // append key-value to form
            form.appendChild(input)
        }
    }

    // send post request
    document.body.appendChild(form);
    form.submit();

    // remove form from document
    document.body.removeChild(form);
}

The calling method is very simple, copy this code block to the script tag in your own HTML document , and then you can use it directly. Just choose the GET/POST method according to your own needs.
You have to slowly understand the difference during use.

[Related recommendations: javascript learning tutorial]

The above is the detailed content of How to send GET/POST request using Javascript? (detailed examples). For more information, please follow other related articles on the PHP Chinese website!