jQuery 연구 노트 (1)--jQuery를 사용하여 비동기 통신 구현(json을 사용하여 값 전달) 특정 ideas

jQuery 연구 노트 (1)--jQuery를 사용하여 비동기 통신 구현(json을 사용하여 값 전달) 특정 ideas_jquery

WBOY

풀어 주다： 2016-05-16 17:37:57

원래의

1046명이 탐색했습니다.

jQuery는 요즘 인기 있는 js 라이브러리로, 공식 웹사이트에서 "적게 쓰고, 더 많이 하라"고 말하는 것처럼 간단한 코드로 이상적인 효과를 낼 수 있습니다. Jquery는 이전의 JavaScript 작성 방식을 어느 정도 다시 작성하여 이전 기사에서 ajax를 사용하여 비동기 통신을 구현하는 효과를 얻었고 jquery의 매력을 느꼈습니다.

먼저 jquery의 최신 js 파일을 다운로드하여 파일에 추가해야 합니다. 다운로드하려면 클릭하세요.

이 통신은 jquery의 jQuery.post(url,[data], [callback],[type]) 메서드를 사용하며 이는 간단한 POST입니다. 복잡한 $.ajax를 대체하는 요청 함수입니다. 요청이 성공하면 콜백 함수를 호출할 수 있습니다. 매개변수는 url, [data], [callback], [type]이며 해당 매개변수 유형은 String, Map, Function, String입니다.

●url : 요청주소를 보냅니다.

●data: 전송할 키/값 매개변수입니다.

●콜백: 전송 성공 시 콜백 기능입니다.

●유형: 반환 콘텐츠 형식, xml, html, script, json, text, _default)

새 jsp 파일 jqueryDemo.jsp를 생성합니다. 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. :

<%@ 페이지 언어="java"contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>

jquery

;script type="text /javascript">
function accountCheck(){
var account=$('#account').val()
if(account==""){
alert("사용자 계정은 비어 있을 수 없습니다!")
$('#img').html("")
$('#msg').text(""); >return;
}
$.post('JqueryServlet',{strAccount:account},function(data){
eval("data=" data);
if(data.success) {
$( '#img').html("

")
}else{
$('#img'). html("

")
}
$('#msg').text(data.msg)
}); 🎜>}

="demo" style= "width: 450px;height: 200px;">

신규 사용자 등록
< /tr>

사용자 계정: *
< ;td style=" width:175px; ">

< /div>

사용자 비밀번호:
< ;td>< 입력 유형="password"id="password1" name="password1">
>
비밀번호 반복:

html>

새 서블릿 파일 JqueryServlet.java를 생성합니다. 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다. :

패키지 com.ldfsoft.servlet; 
java.io.IOException 가져오기; 
java.io.PrintWriter 가져오기; 
javax.servlet.ServletException 가져오기; 
javax.servlet.http.HttpServlet 가져오기; 
importjavax.servlet.http.HttpServletRequest; 
importjavax.servlet.http.HttpServletResponse; 
/**
*서블릿 구현 클래스 JqueryServlet 
*/ 
public class JqueryServlet extendsHttpServlet { 
privatestatic final long serialVersionUID = 1L; 
/**
* @see HttpServlet#HttpServlet() 
*/ 
public JqueryServlet() { 
super(); 
// TODO 자동 생성 생성자 스텁 
} 
/**
* @see HttpServlet#service(HttpServletRequestrequest, HttpServletResponse 응답) 
*/ 
protectedvoid service(HttpServletRequest 요청, HttpServletResponse 응답) throwsServletException, IOException { 
//TODO Auto- 생성된 메소드 스텁 
request.setCharacterEncoding("utf-8"); 
response.setContentType("text/html;charset=utf-8"); 
문자열 계정=request.getParameter("strAccount"); 
PrintWriter out=response.getWriter(); 
문자열 str=""; //사용以json传值 
if(account.equals("admin")){ 
str="{success:true,msg:'该账户已存재'}"; 
}else{ 
str="{success:false,msg:'该账户可以使용'}"; 
} 
out.write(str); 
} 
} 