이 글은 모두를 위해 jquery ajax에서 양식 데이터를 비동기적으로 제출하는 방법을 주로 소개합니다. 관심 있는 친구들이 참고할 수 있기를 바랍니다.
jquery의 ajax 메서드를 사용하여 양식을 비동기적으로 제출하면 json 데이터가 백그라운드에서 반환되고 콜백 함수에 의해 처리됩니다.
에서 처리되는 데이터는 다음과 같습니다. 양식은 serialize() 메서드를 사용하여 직렬화할 수 있으며 제출된 데이터에 파일 스트림이 포함된 경우 FormData 개체를 사용해야 합니다.
파일이 없는 양식 데이터는 다음을 사용합니다. var data = $(form).serialize();
파일이 있는 양식 데이터 사용: var data = new FormData($(form)[0]);
1. 파일이 없는 Ajax 제출 데이터:
html: 양식 form
<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: 양식 양식
파일 업로드가 있는 양식 양식은 510ae8a17245f2f8214bae2cb84f242b 양식을 사용하여 FormData 개체를 구성하는 것입니다. 다음:
html: 양식이 없습니다.<p id="uploadFile"> <input id="file" name="avatar" type="file"/> <button id="upload" data-url="/admin/upload" type="button">上传头像</button> </p>jquery 비동기 처리:
$("#upload").click(function(){ var targetUrl = $(this).attr("data-url"); var data = new FormData(); //FormData对象加入参数 data.append('file', $('#file')[0].files[0]); //'file' 为参数名,$('#file')[0].files[0])获取上传的文件,如果需上传多个文件,要在<input>标签加上属性multiple $.ajax({ type:'post', url:targetUrl, cache: false, processData: false, contentType: false, data:data, dataType:'json', success:function(data){ alert('success'); }, error:function(){ alert("请求失败") } }) })관련 권장 사항:
Ex Ajax 비동기 요청에 대한 충분한 설명 technology
Ajax 비동기 요청의 사용 예에 대해 이야기해 보세요
위 내용은 양식 데이터를 비동기적으로 제출하는 jquery ajax 방법의 분석 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!