JavaScript calls background method with parameters

In front-end development, it is often necessary to call background methods and pass parameters. JavaScript is the most commonly used language in front-end development, so the following will introduce how to use JavaScript to call background methods with parameters.

1. Use JQuery Ajax to call background methods

JQuery is a very popular JavaScript library that provides a convenient Ajax calling method. The following is an example of using JQuery Ajax to call a background method:

$.ajax({
    type: "POST",
    url: "url",
    data: {param1:value1,param2:value2},
    dataType: "json",
    success: function(response){
        // 处理响应数据
    },
    error: function(xhr, status, error){
        // 处理错误
    }
});

Among them, type represents the request method, which can be GET or POST; url represents the URL address of the request; data represents the parameter to be passed, which can be a Object or string; dataType represents the expected response type, which can be "json", "xml" or "html", etc.; success represents the callback function when the request is successful; error represents the callback function when the request fails.

2. Use Fetch API to call background methods

Fetch API is a new way to initiate network requests in Web API. It provides more flexible and powerful functions. The following is an example of using the Fetch API to call a background method:

fetch(url, {
    method: 'POST',
    body: JSON.stringify({param1:value1,param2:value2}),
    headers:{
        'Content-Type': 'application/json'
    }
})
.then(response => response.json())
.then(data => {
    // 处理响应数据
})
.catch(error => {
    // 处理错误
});

Among them, url represents the requested URL address; method represents the requested method, which can be GET or POST; body represents the parameter to be passed, which can be a Object, FormData or Blob object, etc.; headers represents the header information to be sent. Here you need to set Content-Type to application/json; then represents the callback function when the request is successful; catch represents the callback function when the request fails.

3. Use XMLHttpRequest to call background methods

XMLHttpRequest is the native Ajax method provided by JavaScript. It can directly obtain the data returned by the server and process it. The following is an example of using XMLHttpRequest to call a background method:

const xhr = new XMLHttpRequest();
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        const response = JSON.parse(xhr.responseText);
        // 处理响应数据
    } else {
        // 处理错误
    }
};
xhr.send("param1=value1&param2=value2");

Among them, the open method means opening a request, and the parameters are the request method, the request URL address and whether it is asynchronous; the setRequestHeader method means setting the header information to be sent. , here you need to set the Content-Type to application/x-www-form-urlencoded; onreadystatechange represents the callback function when the request status changes; the send method represents sending the request and passing parameters.

Summary

The above introduces three common ways of calling background methods in JavaScript: using JQuery Ajax, using Fetch API and using XMLHttpRequest. In actual development, you can choose a suitable method according to actual needs, and pay attention to setting the request method, URL, parameters, header information, etc. At the same time, you also need to pay attention to preventing malicious attacks and avoiding security risks when processing response data and errors.

The above is the detailed content of JavaScript calls background method with parameters. For more information, please follow other related articles on the PHP Chinese website!