JQuery_jquery의 serialize(), serializeArray() 및 param() 메서드 예제 소개

다음은 서버 측 jsp 코드입니다.

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<% 
request.setCharacterEncoding("UTF-8"); 
String username = request.getParameter("username"); 
String content = request.getParameter("content"); 
out.println("<div class='comment'><h6> "+username+" :</h6><p class='para'> "+content+" 
</p></div>"); 
%>

JQuery의 다른 메소드와 마찬가지로 serialize() 메소드도 JQuery 객체에 작용하여 DOM 요소의 내용을 Ajax 요청에 대한 문자열로 직렬화할 수 있습니다. serialize() 메소드를 사용하면 이 페이지의 모든 필드를 제출할 수 있습니다.

$("#send").click(function(){ 
$.get("get1.jsp", $("#form1").serialize(), function(data, textStatus) 
$("#resText").html(data); 
});
});

'제출' 버튼을 클릭하면 form1에 속한 모든 양식 요소를 백그라운드로 제출할 수 있습니다. 양식에 더 많은 필드를 추가하더라도 스크립트를 계속 사용할 수 있으며 다른 중복 작업이 필요하지 않습니다.

문자열 모드를 사용할 때 문자 인코딩(중국어 문제)에 주의해야 합니다. 인코딩으로 인해 문제가 발생하지 않도록 하려면 자동으로 인코딩되는 serialize() 메서드를 사용하면 됩니다.

serialize() 메서드는 JQuery 객체에서 작동하기 때문에 양식에서 사용할 수 있을 뿐만 아니라 다음 JQuery 코드와 같이 다른 선택기에 의해 선택된 요소에서도 사용할 수 있습니다.

$(":checkbox,:radio").serialize();

체크박스와 라디오 버튼의 값을 문자열 형식으로 직렬화합니다.

JQuery에는 serialize()와 유사한 메서드인 serializeArray()도 있습니다. 이 메서드는 문자열을 반환하지 않지만 DOM 요소를 직렬화하고 데이터를 JSON 형식으로 반환합니다. JQuery 코드는 다음과 같습니다.

var fields = $(":checkbox,:radio").serializeArray();
console.log(fields); //用FireBug输出

$.param() 메소드는 키/값에 따라 배열이나 객체를 직렬화하는 데 사용되는 serialize() 메소드의 핵심입니다.

예를 들어 일반 개체를 직렬화하려면 다음과 같이 하세요.

var obj = {a:1,b:2,c:3};
var k = $.param(obj);
alert(k); //输出a=1&b=2&c=3