解释jQuery中向服务器发送请求的常见方法

在这篇文章中，我们将看到通过使用jQuery库向服务器发送请求的常用方法。jQuery是一个开源的JavaScript库，jQuery简化了HTML文档的遍历和操作、浏览器事件处理、DOM动画、Ajax交互的跨浏览器JavaScript开发。

向服务器发送请求的常见方法： jQuery有两个方法get()和post()，用于向服务器发送get请求和post请求。

第一个方法是get()方式，用于从服务器上检索数据。get()方法可能会返回缓存的数据。
post()方法也可以用来从服务器上获取数据。然而，post总是使用发送数据到服务器，而且Post方法从不缓存数据。

使用jQuery get()方法向服务器发送请求： $.get()方法从服务器加载数据。

语法:

$.get(url,callback);

参数:

Url。所需的URL参数指定了你想请求的URL。
callback。可选的回调参数是在请求成功时要执行的函数的名称

例子1：在这个例子中，我们将制作一个data.txt文件。当你点击获取请求按钮时，这个文件将被返回。

data.txt:

GeeksforGeeks

index.html:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <script type="text/javascript" 
            src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
    <title>Get Request Example in JQuery</title>
    <script>
        (document).ready(function () {
            ('#Get-Method').click(function () {
                .get('data.txt', function (data, status) {
                    ('#output').append(data);
                    $('#response').append("Response: " + status);
  
                }, 'text');
            });
        });
    </script>
</head>
  
<body>
    <button id="Get-Method"> Get Request</button>
    <p id="output"></p>
    <p id="response"></p>
</body>
  
</html>

输出

解释jQuery中向服务器发送请求的常见方法

获取方法输出

使用jQuery post()方法向服务器发送请求： post()方法从服务器加载数据或向服务器发送数据。

语法:

$(selector).post(url,data,callback ,dataType);

参数:

Url。所需的URL参数指定了你想请求的URL。
data。数据参数数据被发送到服务器。
callback。如果请求成功，回调函数何时被执行。
dataType：数据类型是指数据的类型。

例子2：这个例子使用post()方法向服务器发送请求。

data.php:该文件将在你点击发布请求按钮时被调用。

<?php
    echo "GeeksforGeeks" ;
?>

index.html:

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <script type="text/javascript" 
            src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    </script>
    <title>Get Request Example in JQuery</title>
</head>
  
<body>
    <h3>GeeksForGeeks</h3>
    <button id="Post-Method"> 
        Post Request Example
    </button><br><br>
    Response From Server:<h3 id="output"></h3>
    <script>
        (document).ready(function () {
            ("#Post-Method").click(function () {
                $.post('data.php', { name: "GFG" }, function (data, status) {
                    document.getElementById('output').innerHTML = data;
                });
            });
  
        });
    </script>
</body>
  
</html>