이번에는 양식 데이터의 비동기 제출을 구현하는 jquery+ajax와 양식 데이터의 비동기 제출을 구현하는 jquery+ajax를 가져왔습니다. Notes다음은 실제 사례입니다. 살펴보겠습니다.
jquery의 ajax 메서드를 사용하여 양식을 비동기적으로 제출하면 json 데이터가 백그라운드에서 반환되고 콜백 함수는 비동기 목적을 달성하기 위해 페이지를 새로 고치지 않고 이를 처리합니다. 양식에서 처리된 데이터는 serialize() 메서드를 사용하여 직렬화할 수 있습니다. 제출된 데이터에 파일 스트림이 포함되어 있으면 FormData 개체를 사용해야 합니다.
파일 없이 양식 데이터 사용: var data = $(form).serialize();
파일과 함께 양식 데이터 사용: var data = new FormData($(form)[0]);
1. 파일이 없는 Ajax 제출 데이터:
HTML: 양식
<form id="addForm" action="${pageContext.request.contextPath}/admin/saveAdd" method="post"> <input type="text" name="name" placeholder="请输入名字" /> <input type="password" name="password" placeholder="密码"/> </form> <button type="button" id="submitAdd">确认</button>
jquery 비동기 처리
$("#submitAdd").click(function(){ var targetUrl = $("#addForm").attr("action"); var data = $("#addForm").serialize(); $.ajax({ type:'post', url:targetUrl, cache: false, data:data, dataType:'json', success:function(data){ alert('success'); }, error:function(){ alert("请求失败") } }) })
2. 파일이 포함된 Ajax 제출 데이터:
HTML: 양식
파일 업로드
가 있는 양식은