>  기사  >  웹 프론트엔드  >  Jquery와 상호작용하는 방법은 무엇입니까?

Jquery와 상호작용하는 방법은 무엇입니까?

青灯夜游
青灯夜游원래의
2023-01-03 19:03:472558검색

Jquery 상호 작용 방법은 다음과 같습니다. 1. 로드 방법, 서버에서 데이터를 로드하고 반환된 데이터를 선택한 요소에 넣습니다. 2. GET 방법, HTTP GET 요청을 통해 서버에서 데이터 요청; HTTP POST 요청을 통한 서버 4. 반환된 개체는 json 형식입니다. 6. 양식에 첨부된 부분 새로 고침 메서드.

Jquery와 상호작용하는 방법은 무엇입니까?

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6 버전, Dell G3 컴퓨터.

jquery ajax 프론트 및 백엔드와 상호 작용하는 6가지 방법

첫 번째 방법: 서버에서 데이터를 로드하고 로드한 다음 반환된 데이터를 선택한 요소에 넣습니다

<script type="text/javascript">
$(document).ready(function(){
    $("#mybutton").click(function(){
        $("#mydiv").load("haha.txt",function(responseTxt,statusTxt,xhr){
            if(statusTxt=="success"){
                alert("成功");
            }
            if(statusTxt=="error"){
                alert("失败:"+xhr.status+":"+xhr.statusTxt);
            }
        });
    });
})
</script>
下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容,  
加载到指定的 <div> 元素中:
实例:
$("#div1").load("demo_test.txt #p1");

두 번째 방법: GET 방법:

$(document).ready(function(){
    $("#mybutton").click(function(){
        $.get("haha.txt",null,function(data,status){   
            alert(data+":"+status);
        });
    });
});

세 번째 방법: POST 방법:

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            $.get("/Json/JsonServlet", {
                name:"我是谁",
                age:12
            }, function(data, status) {
                alert(data + ":" + status);
            });
        });
    });
</script>

백그라운드 서블릿과 상호작용하는 POST: POST要和后台Servlet交互:

response.setCharacterEncoding("utf-8");
        System.out.println(request.getParameter("name"));
        System.out.println(request.getParameter("age"));
        response.getWriter().println("你找到我了");

后台输出:

我是谁
12

要访问后台servlet也可以直接如此写地址:

$.get("JsonServlet",

第四种:getJSON方式:

<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            $.getJSON("JsonServlet", {
                name:"我是谁",
                age:12
            }, function(json) {
                alert(json.name);
                $("#mydiv").html(json.name);
            });
        });
    });
</script>

返回的就直接是json格式的对象,无需JSON.parse的方法转换。

注意:不管是哪种方式后台都有两种方式和前台交互:

第一种后台交互:直接拼接字符串。

response.getWriter().  
print("{\"name\":\"爱你\",\"age\":12}");

第二种 传入JSON对象:

JSONObject jsonObject =  
new JSONObject("{&#39;name&#39;:&#39;爱你&#39;,&#39;age&#39;:12}");
response.getWriter().print(jsonObject);

相同的最终传递给前台的时候都默认以字符串的形式传递过去,
注意的是除了getJSON方式 前台可以使用两种方式来将字符串转换成js对象:

1. eval()函数  :不推荐,有隐患 会执行其他js操作
2. JSON.parse()函数 :推荐:只执行对象转换操作

你们是不是还要问 不是有五种吗 为啥子前面就讲了四种?

没错 还有一种:

第五种:jQuery.ajax():

执行异步 HTTP (Ajax) 请求rrreee

백그라운드 출력: rrreee에 액세스하려면 백그라운드 서블릿은 다음과 같이 주소를 직접 쓸 수도 있습니다. rrreee

🎜🎜네 번째 방법: getJSON 메서드: 🎜🎜🎜rrreee🎜🎜 반환된 개체는 JSON.parse 메서드 변환이 필요 없이 직접 json 형식입니다. 🎜🎜🎜참고: 배경이 프런트엔드와 상호 작용하는 방식에 관계없이 두 가지 방법이 있습니다. 🎜🎜🎜첫 번째 배경 상호 작용: 문자열을 직접 연결합니다. 🎜🎜rrreee🎜🎜 전달된 JSON 개체의 두 번째 유형: 🎜🎜rrreee🎜 동일한 내용이 기본적으로 문자열 형식으로 프런트 데스크에 전달됩니다. 🎜 참고로 🎜getJSON 메서드🎜 외에도 데스크는 두 가지 방법을 사용할 수 있습니다. 문자열을 js 객체로 변환하려면: 🎜rrreee🎜 아직도 5가지 종류가 있는지 묻고 싶나요? 이전에 왜 4가지 종류에 대해 이야기했습니까? 🎜🎜예, 또 다른 방법이 있습니다. 🎜🎜🎜🎜다섯 번째 방법: jQuery.ajax(): 🎜🎜🎜🎜비동기 HTTP(Ajax) 요청 실행🎜🎜이 방법은 기본 AJAX 구현입니다. jQuery의 모든 AJAX 메소드는 ajax() 메소드를 사용합니다. . 간단하고 사용하기 쉬운 상위 수준 구현을 보려면 .get🎜🎜, 🎜🎜🎜을 참조하세요.

위 내용은 Jquery와 상호작용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.