jquery_jquery의 get, post 및 ajax 메소드 사용 요약

JQuery에서는 get, post 및 ajax 메소드를 사용하여 데이터를 서버로 전송할 수 있습니다

get 메소드 사용(customForGet.js 파일):

함수 verify(){
//1.텍스트 상자의 데이터를 가져옵니다

//DOM을 통해 가져오기
//document.getElementByIdx("userName");
//JQuery를 통해 가져오기
var jqueryObj = $("#userName");
/ /노드 값 가져오기
var userName = jqueryObj.val();

//2. 텍스트 상자 데이터를 서버 측 서블릿으로 보냅니다.
$.get("AJAXServer?name=" userName,null,callback);
}
//콜백 함수
함수 콜백(데이터){

///3. 서버에서 반환된 데이터를 수락합니다.
//alert(data)
//4. 서버에서 반환된 데이터를
//Get it for 페이지에 표시합니다. 결과 정보를 표시하는 노드
var resultObj = $("#result");
resultObj.html(data);
}

위 파일을 다음과 같이 축약할 수 있습니다.
function verify(){
$.get("AJAXServer?name=" $("#userName").val(),null,function callback(data ){$("#result").html(data);});
}

게시 방법 사용(customForPost.js):

함수 verify(){
//1.텍스트 상자의 데이터를 가져옵니다

//DOM을 통해 가져오기
//document.getElementByIdx("userName");
//JQuery를 통해 가져오기
var jqueryObj = $("#userName");
/ /노드 값 가져오기
var userName = jqueryObj.val();

//2. 텍스트 상자 데이터를 서버측 서블릿으로 보냅니다.
// $.post("AJAXServer?name=" userName,null,callback);//다음을 사용하여 매개변수를 직접 따를 수도 있습니다. post URL
$.post("AJAXServer",{name:userName,test:"test123"},callback);//여러 매개변수를 전달할 때 속성 값이 변수인 경우 쉼표로 구분합니다. userName과 같이 직접 작성합니다. 문자인 경우 "test123"과 같이 따옴표를 추가합니다.
}
//Callback function
function callback(data){

///3. 서버에서 반환된 데이터를 수락합니다.
//alert(data)
//4. 서버에서 반환된 데이터를
//Get it for 페이지에 표시합니다. 결과 정보를 표시하는 노드
var resultObj = $("#result");
resultObj.html(data);
}

위 파일을 다음과 같이 축약할 수 있습니다.
function verify(){
$.post("AJAXServer",{name:$("#userName").val(),test: "test123"},function(data){$("#result").html(data)});
}

요약: 사실 get과 post 메소드는 비슷합니다. 단, get과 post가 서로 바뀌고 매개변수의 저장 위치를 ​​두 위치 모두에서 사용할 수 있습니다.

예:

$.post("AJAXServer",{name:$("#userName").val(),test:"test123"},function(data){$("#result").html(data) });

매개변수 위치를 수정하지 않고 get을 직접 변경하면 됩니다.

$.get("AJAXServer",{name:$("#userName").val(),test:"test123"},function(data){$("#result").html(data) });

ajax 메소드(customForAjaxText)를 사용하면 데이터 유형이 일반 텍스트인 데이터를 수신합니다.

함수 verify(){
//1. 텍스트 상자의 데이터 가져오기
//JQuery를 통해 가져오기
var jqueryObj = $("#userName");
// 가져오기 노드의 값
var userName = jqueryObj.val();

//2. 텍스트 상자 데이터를 서버측 서블릿
$.ajax({
type:"POST",
url:"AJAXServer",
data:"로 보냅니다. name =" userName "&" "test=123",
success:function(data){
$("#result").html(data);
}
});
}

Ajax 메소드(customForAjaxText)를 사용하여 데이터 유형이 XML인 데이터 수신:

함수 verify(){
//1. 텍스트 상자의 데이터 가져오기
//JQuery를 통해 가져오기
var jqueryObj = $("#userName");
// 가져오기 노드의 값
var userName = jqueryObj.val();

//2. 텍스트 상자 데이터를 서버 측 서블릿
$.ajax({
type:"POST",
url:"AJAXXMLServer",
data:"로 보냅니다. name =" userName "&" "test=123",

dataType: "xml",
success:function(data){
//먼저 전달된 DOM 객체를 jquery 객체로 변환해야 합니다
var jqueryObj = $(data);
//메시지 노드 가져오기
var messageNods = jqueryObj.children();
//텍스트 콘텐츠 가져오기
var responseText = messageNods.text();
$("#result") .html( responseText);
}
});
}