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

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"%>





;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);
}
}

     好了，现在可以运行了，打开服务器，运行此jsp文件，页face如下所示：

    当输入admin时，页face如下所示：

     当输入其他字符时，页face如下所示：

     可以看出jquery能够实现ajax의 功能，并且代码更简洁了。

      这是本人文习的结果，允许转载，欢迎交流，但转载务必给流本文章的链接地址

성명：

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