jquery+ajax가 데이터 업데이트를 구현하는 방법

이번에는 jquery+ajax로 데이터 업데이트를 구현하는 방법과 데이터 업데이트를 구현하기 위한 jquery+ajax의 Notes가 무엇인지 보여드리겠습니다.

애플리케이션 배경

springboot아키텍처 사용아래와 같은 인터페이스 레이아웃에서 데이터를 저장하거나 업데이트하려면 성공 또는 실패를 메시지로 표시하는 방법은 무엇입니까? 기존 springmvc 모드를 사용하는 경우 페이지를 프런트 엔드에 전달해야 합니다. 이 페이지는 작업이 성공했는지 여부만 묻는 메시지를 표시합니다. 프롬프트 후에는 일부 웹사이트를 탐색할 때 제공되는 일부 프롬프트와 마찬가지로 데이터를 업데이트해야 합니다. 작업이 성공했으며 5초 후에 반환됩니다.

상대적으로 멍청하고 고객 경험도 상대적으로 열악합니다.

Transformation process

Ajax를 사용하면 위의 문제를 해결할 수 있나요?

답은 '예'입니다. 저장을 클릭하면 ResponseBody 태그를 사용하여 데이터만 반환하도록 제한하는 Ajax 요청이 백그라운드로 수행됩니다. 그런 다음 반환된 데이터를 기반으로 해당 프롬프트 정보를 제공하면 됩니다.

전통적인 Ajax 요청 데이터에서는 데이터를 형식으로 재구성하고 요청 본문에 모두 넣어야 합니다. 다음 코드에 표시된 대로:

$.ajax({
 type: 'POST',
 url: url,
 data: data,
 success: success,
 dataType: dataType
});

내가 제출하는 양식 데이터가 상대적으로 크면 데이터도 상대적으로 커집니다. 코드가 상대적으로 부풀어 오른다. 동시에 형태의 형태 역시 존재의 의미를 상실하였다.

Ajax 양식 제출을 구현하는 더 우아한 방법이 있나요? 틀림없이.

jquery의 ajaxform 플러그인은 비교적 좋은 선택입니다.

구현 과정

첫 번째 단계. 물론 강력한 플러그인도 소개합니다.

<script src="static/assets/js/jquery.form.min.js"></script>

js를 다운로드하려면 github 주소를 알려드리겠습니다: https://github.com/jquery-form/form.

2단계. 요청을 보내려는 위치에 ajax+form 요청을 보냅니다.

function insert() {
    var options = {
     // target:  '#output1', // 用服务器返回的数据 更新 id为output1的内容.
     // beforeSubmit: showRequest, // 提交前
     success:  showResponse, // 提交后
     //另外的一些属性:
     //url:  url   // 默认是form的action，如果写的话，会覆盖from的action.
     //type:  type  // 默认是form的method，如果写的话，会覆盖from的method.('get' or 'post').
     //dataType: null  // 'xml', 'script', or 'json' (接受服务端返回的类型.)
     //clearForm: true  // 成功提交后，清除所有的表单元素的值.
     resetForm: false  // 成功提交后，重置所有的表单元素的值.
     //由于某种原因,提交陷入无限等待之中,timeout参数就是用来限制请求的时间,
     //当请求大于3秒后，跳出请求.
     //timeout: 3000
    };
    //'ajaxForm' 方式的表单 .
    $('#baseForm').ajaxSubmit(options);
   }

제출 후 반환된 메서드 처리

// 提交后
   function showResponse(responseText, statusText) {
    alert('状态: ' + statusText + '\n 返回的内容是: \n' + responseText);
    
   }

백엔드 구현 코드

@RequestMapping("/basicSave")
 @ResponseBody
 public String BasicSave(PointInfo pi){
  if(!pi.getSaddress().equals("")){
   pi.setType("1");
  }else{
   pi.setType("0");
  }
  int newId = pointInfoService.saveorupdate(pi);
  return newId+"";
 }

로직을 직접 정의

Note

• 제출 시 반드시 ajaxSubmit 메서드를 사용하세요

• Sub 미루어진 행동, 요청 메소드(post 또는 get), dataType(json, xml) 등은 모두 기본적으로 양식의 데이터를 사용합니다. 매개변수를 수정하면 덮어쓰게 됩니다.

후속 조사

프롬프트 박스 정보

알림을 사용하시겠습니까? 부트스트랩을 사용하려고 최선을 다했습니다. 여기서 알림을 생성하면 마치 맛있는 음식을 접시에 뱉는 것과 같습니다. 더 아름다운 메시지 상자가 있나요? 물론 대답은 '예'입니다!

알림 플러그인을 사용하여 프롬프트 상자를 아름답게 만드세요

먼저 렌더링:

구현 단계

1. 알림에 필요한 js 및 css 가져오기

<script src="static/assets/plugins/notifyjs/dist/notify.min.js"></script>
 <script src="static/assets/plugins/notifications/notify-metro.js"></script>
 <script src="static/assets/plugins/notifications/notifications.js"></script>
 <link href="static/assets/plugins/notifications/notification.css" rel="external nofollow" rel="stylesheet">

2.

$.Notification.notify('success','top center', '温馨提示', '保存成功！');

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

jquery에서 ajax를 요청하고 servlet에서 ajax를 응답하세요

jquery를 사용하여 입력 상자의 텍스트 콘텐츠를 조작하세요

입력 상자와 드롭 사이의 연결 효과를 달성하세요. 다운박스

위 내용은 jquery+ajax가 데이터 업데이트를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!