나는 프로젝트를 배치하고 그것을 연주했다. 오늘 저는 쇼핑 카트의 제품 수량을 수정하여 해당 총 가격을 부분적으로 업데이트하는 기능을 개선했습니다. 모든 사람들은 이것이 Ajax와 함께 구현되어야한다는 것을 알고 있습니다. 나는 전에 Ajax를 배운 적이 없으며, 단순히 Ajax 지식을 배우기 위해이 작은 기능을 사용했습니다.
1. 문제 분석
페이지의 상황을 살펴 보겠습니다.
기능은 위와 같습니다. AJAX를 사용할 수 없기 전에 일반적으로 사용자의 수정 된 값을 기반으로 작업을 찾은 다음 새 JSP 페이지로 돌아와 전체 페이지를 다시로드하여 숫자의 업데이트를 완료합니다. 그러나 Ajax 기술을 사용하면 Ajax 기술을 사용하여 전체 페이지를 다시로드하는 대신 변경하려는 장소의 변경 사항을 부분적으로 새로 고칠 수 있습니다. 먼저 위의 그림에 해당하는 JSP 부분의 코드를 살펴 보겠습니다.
<div> <!-쇼핑 카트-> <div id = "shopping_cart"> <div> 내 쇼핑 카트 </div> <테이블 셀 패딩 = "0"셀 패싱 = "0"> <tr> <th> 제품 번호 </th> <th colspan = "2"> 제품 이름 </th> <th> <th> Quantity </th> </th> </tr> <c : foreach items = "$ {sessionscope.forder.sorders}"var = "var ="sorder "varstatus ="num "> <tr lang ="$ {sorder.product.id} "> <td> <a href ="#"> $ {num.count} </td> <td> <td> src = "$ {shop}/files/$ {sorder.product.pic}"/> </td> <td> <a href = "#"> $ {sorder.name} </a> <td> $ {sorder.price} <td> <!-텍스트 상자-> input style = ": 20px;" value = "$ {sorder.number}"lang = "$ {sorder.number}"> </td> <td> $ {sorder.price*sorder.number} </td> <td> <a href = "#"> </a> </a> </a> </a> </a> </a> </table>. id = "Totals-table"> <tbody> <tt> <td colspan = "1"> <strong> subtotal </strong> </td> <td style = ""> <strong> <span <span id = "total"> $ {sessionscope.total} </span> </td> </td> <td> <td. colspan = "1">화물 </td> <td style = "" "> <span id ="yunfei "> 0.00 </span> </td> </tr> <td> <td colspan ="1 "> <strong> Total </strong> </td> <td style =" "<span id = "totalall"> <strong> $ {sessionscope.forder.total} </strong> </span> </td> </tr> </tbody> </table> <div> <font> <a href = "$ {shop} /user/confirm.jsp"> 확인 | 스타일 = "클리어 : 둘 다"> </div> </div> </div> </div> </div> </div> </div> </div>많이 보이지만 기능은 실제로 매우 간단합니다. 도메인에서 해당 데이터를 표시하여 표시합니다. 위에서 설명한 기능을 구현하려면 먼저 아이디어를 분석하겠습니다.
첫째, 이벤트를 등록해야합니다. 즉, 텍스트 상자에 의해 트리거 된 이벤트가 수정되었습니다.
이 경우 사용자가 숫자 입력을 받고 입력의 합법성을 판단합니다. 사용자가 무작위로 입력하는 것을 방지해야하기 때문입니다.
합법적 인 경우 AJAX 요청을 통해 배경으로 데이터를 보내십시오.
배경은 해당 비즈니스 논리 방법을 호출하여 새로운 번호에 대한 새로운 결과를 얻고 스트림을 통해 전경으로 반환합니다.
Ajax가 결과를 수신 한 후 해당 위치에서 데이터를 업데이트합니다. 전체 프로세스가 끝났습니다.
불법 인 경우 수정 전 숫자가 표시됩니다. 치료가 완료되지 않았습니다
2. AJAX 요청의 구현
프로세스를 분석 한 후 프로세스를 구현하기 시작합니다. 먼저 JS 부분의 코드를 여기에 붙여 넣은 다음 위의 프로세스에 따라 자세히 분석합니다.
<script type = "text/javaScript"> $ (function () {// 1. register event $ ( ". text"). change (function () {// 2. 데이터 var number = this. && number는 합법적 인 경우 숫자 $ (this) .attr ( "lang", number); 제품의 ID는 수정 된 수량 $ .post ( "SORDER_UPDATESORDER.ACTION", {number : number, 'product.Id': pid}, function (total) {$ ( "#total"). html (총); // html ( "#yunfei"); $ ( "#totalall"). html (총*1 + yunfei*1) .tofixed (2)); // 단일 제품의 하위 토탈을 계산하고 두 자리 자리를 유지합니다. $ (this) .parent (). next (). html (가격); } else {// 불법 인 경우 합법적 인 숫자로 복원하십시오. value = $ (this) .attr ( "lang"); }})})}) </script>2.1 등록 이벤트
등록 이벤트가 먼저이 텍스트 상자에 배치되어야 함을 알 수 있습니다. 여기에는 클래스 선택기를 통해 위치됩니다. 텍스트 상자이므로 change ()는 이벤트를 등록하는 데 사용 된 다음 이벤트를 처리하기 위해 IT에서 함수 () 함수를 정의합니다.
2.2 데이터의 합법성을 판단하십시오
자, 이벤트를 등록한 후 먼저 사용자가 입력 한 숫자의 합법성에 대한 판단을 내려야합니다. 사용자는 0 또는 음수를 입력하거나 소수판을 입력하거나 문자 또는 기타 문자 등을 입력 할 수 있으므로 확인이 필요합니다. iSNAN (숫자)은 숫자가 숫자가 아닌 경우 TRUE가 반환된다는 것을 의미합니다. 이 기능을 사용하여 숫자인지 확인할 수 있습니다. parseint (숫자)는 배열을 반올림 한 다음 그 자체로 비교하는 것을 의미합니다. 우리는 숫자가 정수인지 여부를 결정하기 위해 이것을 영리하게 사용합니다.
2.3 Ajax 요청을 보내십시오
데이터가 합법적 인 경우 데이터를 얻은 후에는 AJAX 요청을 백그라운드로 보낼 수 있습니다. 질문을 고려해야합니다. 어떤 매개 변수를 통과해야합니까? 우선, 사용자가 수량을 업데이트하려면 사용자가 입력 한 숫자를 전송해야한다는 것은 의심의 여지가 없습니다. 둘째, 어떤 제품을 전송해야합니까? 즉, 사용자가 수정하려는 제품의 ID 번호를 얻어야합니다. 전송 될 매개 변수를 알면 ID 번호를 얻는 방법을 찾을 수 있습니다.
여기에 질문이 있습니다. 사용자는 쇼핑 카트에 하나 이상의 제품을 가질 수 있습니다. 당연히, 그들은 성명서로 다른 제품의 ID를 얻을 수 있다면 좋을 것이라고 생각할 것입니다. 따라서 그들은 텍스트 상자의 부모 태그를 사용하는 것을 생각했습니다. 다른 제품의 상위 태그는 동일하기 때문에 첫 번째 <TR> 태그이므로 제품의 ID를 LANG 속성에 <TR> 태그에 넣습니다. 왜 LANG 속성에 넣습니까? Lang 속성은 기본적으로 사용되지 않기 때문에 언어를 정의하는 데 사용되며 Lang 속성을 사용하면 다른 속성과 충돌하기 쉽지 않습니다. ~ 이러한 방식으로 $ (this) .parents ( "tr : first"). att ( "lang")를 통해 제품 ID를 얻을 수 있습니다.
다음으로 Ajax 요청을 보내기 시작하여 Post 메소드를 사용하여 보내십시오. 게시물 메소드에는 네 가지 매개 변수가 있습니다.
첫 번째 매개 변수는
두 번째 매개 변수는 JSON 형식을 사용하여 전달할 매개 변수입니다.
세 번째 매개 변수는 함수 (결과)이며 배경을 통과하는 데이터를 수신하는 데 사용됩니다.
네 번째 방법은 수신 할 데이터 유형을 지정하는 것입니다. JSON은 JSON 데이터를 수신하는 것을 의미하며 텍스트는 스트림을받는 것을 의미합니다.
배경에서 반환 된 총은 모든 제품의 총 가격이므로 기능에서 먼저 ID를 기반으로 모든 제품 하위 토탈의 요소를 얻고 총계에 값을 할당합니다. Totalall은화물이 추가 된 총 가격입니다. 후자의 토픽스 (2)는 두 자리 자리를 유지하는 것을 의미합니다. 그런 다음 단일 제품의 하위 토탈 요소를 가져 와서 단일 제품의 하위 운동을 계산하십시오. 이런 식으로 프론트 데스크 페이지는 다시로드하지 않고 업데이트하려는 부분을 업데이트합니다. 이것은 Ajax의 강력한 부분입니다. 이것은 이전 EasyUi와 동일하며 Ajax 요청이기도합니다.
좋아, Ajax 부분이 여기에 소개됩니다. 다음은 지금 당장 요청의 배경 처리입니다.이 프로젝트는 내 프로젝트를위한 것이며 프로젝트 진행 상황을 기록하는 데 사용됩니다.
3. 백엔드 업데이트
방금 Ajax가 요청한 조치는 SortedAction의 UpdatesOrder () 메소드이므로 SorderAction으로 이동하여 updateSord () 메소드를 작성합니다.
@controller@scope ( "프로토 타입") public class sorderaction은 baseeaction <Sorder> {public string addSorder () {// 관련없는 코드 ... // 제품 번호에 따라 제품 수량을 업데이트 공개 문자열 업데이트 ordatesOrder () {forder forder = (forder) session.get ( "forder"); // 쇼핑 항목을 업데이트하고, 전달 된 제품이 모델로 캡슐화되어 있습니다. forder = sorderservice.upDatesOrder (Model, Forder); // 새로운 총 가격을 계산합니다. session.put ( "Forder", Forder); // 스트림 inputStream의 형태로 새 총 가격을 반환 = 새로운 ByTearRayInputStream (forder.getTotal (). toString (). getBytes ()); "스트림"을 반환합니다. }}서비스의 해당 방법은 다음과 같이 향상됩니다.
// Sorderservice 인터페이스 공용 인터페이스 Sorderservice 확장 기초 서비스 <Sorder> {// 관련없는 코드 저장 ... // 제품 ID 및 수량 공개 Forder updatesOrder (Sorder Soorder, Forder Forder)에 따라 제품 수량을 업데이트합니다. sorderservice {// 관련없는 코드를 생략합니다 ... @override public forder updateSord (Sorder Soorder, Forder Forder) {for (Sorder temp : forder.getSorders ()) {if (temp.getProduct (). getId (). equals (sorder.getProduct ()) {temp.setnumber (SORDER.GET); }} 리턴 포더; }}마지막으로 struts.xml 파일의 구성은 다음과 같이 <global-result>에 "stream"을 할당하는 것입니다.
<Global-Results> <!-다른 공개 구성 저장-> <result name = "stream"type = "stream"> <param name = "inputname"> inputStream </param> </result> </global-restults>
좋아, 이제 행동에서 계산 된 총 가격은 스트림 형태를 통해 프론트 데스크로 전송 될 수있다.
원본 링크 : http://blog.csdn.net/eson_15/article/details/51487323
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.