jQueryフレームワークのAjax関数-$(get)$(post)

jQueryフレームワークのajax関数- (get)(get)g e t (投稿)

[外部リンク画像の転送に失敗しました。ソースサイトに反リーチメカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします(img-rw3ZjWHk-1600399755294)(ここに画像の説明を挿入
)]

## $。get request-principle

  • 関数を取得

    $ .get(url、[data]、[callback]、[type])

    • url:「s1」などのサーバーのアクセスパスを示します

    • データ:サーバーに送信されるパラメーターを示します。形式:1: "username = wzx&password = 123" 2:json string

    • コールバック:サーバーから送信された応答を受信することを意味する匿名関数。この関数は自動的に実行されます

    • type:ブラウザがサーバーから期待するデータのタイプを示します。形式: "text" "json"

  • リクエスト原則を取得

ここに画像の説明を挿入

ここに画像の説明を挿入

## jquery_ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/jquery-3.3.1.js"></script>

    <script type="application/javascript">
        $(function () {
     
     
            $("#btn").on("click", function () {
     
     
                $.get(
                    "s2",
                    "username=lbl&password=admin123",
                    function (data) {
     
      //这个data就是服务器返回的字符串
                        //处理数据
                        alert(data);
                    },
                    "text"
                );

            })
        })
    </script>
</head>
<body>

<!--设计一个按钮,一点击这个按钮,就向服务器发出异步请求-->
<input type="button" value="点我,发出异步请求s2" id="btn"/>
</body>
</html>

実行結果:

ここに画像の説明を挿入

## AjaxServlet2:

package com.lbl.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/s2")
public class AjaxServlet2 extends HttpServlet {
    
    
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
    
        System.out.println("收到了异步请求....s2");
        response.getWriter().write("helloworld...s2");
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println(username);
        System.out.println(password);
    }
}

実行結果:

ここに画像の説明を挿入

ここに画像の説明を挿入
ポストにも同じ

jquery_ajax_post.html完全なコード:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="js/jquery-3.3.1.js"></script>

    <script type="application/javascript">
        $(function () {
            $("#btn").on("click", function () {
                $.get(
                    "s2",
                    "username=lbl&password=admin123",
                    function (data) { //这个data就是服务器返回的字符串
                        //处理数据
                        alert(data);
                    },
                    "text"
                );
                $.post(
                    "s2",
                    "username=lft&password=123",
                    function(data){ //这个data就是服务器返回的字符串  var data = []
                        //处理数据
                    },
                    "json"
                );

                var url = "s2";
                var param =  "username=lft&password=123";
                var func = function(data){

                };
                var type = "json";
                $.post(url,param,func,type);

            })
        })
    </script>
</head>
<body>

<!--设计一个按钮,一点击这个按钮,就向服务器发出异步请求-->
<input type="button" value="点我,发出异步请求s2" id="btn"/>
</body>
</html>

おすすめ

転載: blog.csdn.net/qq_37924905/article/details/108662013