jquery ajax jsp_jquery에 양식 데이터를 제출하는 방법

AJAX는 점점 더 인기를 얻고 있습니다. WEB 프로그램 개발자로서 이러한 느낌이 없으면 낙오될 수 있으며, 입사 지원 시 반복적으로 탈락할 수도 있습니다. 나는 또한 웹 프로그램 개발자입니다. 물론 "흐름을 따라야" 합니다. 그렇지 않으면 내 직업이 보장되지 않습니다!

이전에는 AJAX를 Javascript 스크립트를 사용하여 하나씩 구현했는데 매우 번거로웠습니다. Jquery를 배운 후에는 AJAX를 구현하는 것이 그리 어렵지 않다고 느꼈습니다. 물론 Jquery 프레임워크 외에도 다른 훌륭한 프레임워크가 있으므로 여기서는 더 널리 사용되는 Jquery에 중점을 두겠습니다. Jquery AJAX에서 양식을 제출하는 방법에는 두 가지가 있습니다. 하나는 url 매개변수를 통해 데이터를 제출하는 것이고, 다른 하나는 양식을 제출하는 것입니다(일반적으로 양식 양식의 값은 백그라운드에서 얻을 수 있습니다). 제출하는 양식에 요소가 많을 경우에는 두 번째 방법으로 제출하는 것이 좋습니다. 물론 "타자 실력"을 연습하고 싶다면 첫 번째 방법으로 제출하는 것도 나쁘지 않습니다. 나는 개발자들이 그들의 노력을 낭비하고 싶어하지 않는다고 믿습니다!

Ajax 기술은 우수한 사용자 경험을 제공하는 동시에 jquery를 사용하여 개발을 단순화하고 작업 효율성을 향상시킬 수 있습니다.

다음은 일반적인 개발 단계를 소개합니다.

이 글에서는 jquery-1.3.2.min.js 개발 도구를 사용합니다.

두 개의 새 페이지 만들기:

1. show.jsp: ajax를 호출하여 양식의 데이터를 ajax.jsp 페이지로 보냅니다.

2. ajax.jsp: show.jsp 페이지에서 전달된 양식 데이터를 가져오고 결과를 반환합니다.

두 페이지의 인코딩 형식은 GBK로 설정되어야 합니다.

<%@ page contentType="text/html;charset=GBK"%>

show.jsp 페이지의 주요 부분:

1. jquery-1.3.2.min.js에 대한 참조를 추가합니다.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

2. ajax 메소드를 호출할 때 사용되는 폼의 ID를 설정합니다.

<form id="ajaxFrm" >

3. ajax.jsp 페이지에서 반환된 결과를 표시하도록 div를 설정합니다

<div id="ajaxDiv"></div>

4. Ajax 호출 버튼 추가

<input type="button" onClick="doFind();" value="调用一下ajax" >

5. Ajax 호출 기능 추가:

function doFind(){

$.ajax({

cache: false,

type: "POST",

url:"ajax.jsp", //把表单数据发送到ajax.jsp

data:$('#ajaxFrm').serialize(), //要发送的是ajaxFrm表单中的数据

async: false,

error: function(request) {

alert("发送请求失败！");

},

success: function(data) {

$("#ajaxDiv").html(data); //将返回的结果显示到ajaxDiv中

}

});

}

ajax.jsp 페이지 소스 코드:

<%@ page contentType="text/html;charset=GBK"%>

<%

String userName = request.getParameter("UserName");

if(userName!=null){

userName = new String(userName.getBytes("ISO-8859-1"), "utf-8");//解决乱码的问题

}

String returnString = "";

returnString="你好，" + userName;

out.print(returnString);

%>

작동 효과는 다음과 같습니다.

jquery ajax 제출 양식이 액션에서 jsp로 값을 전달합니다

jsp 페이지:

코드는 다음과 같습니다.

var clientTel = $("#clientTel").val(); 
var activityId = $("#activityId").val(); 
$.ajax({ 
type : "post",//发送方式 
url : "/arweb/reserve/saveCode.action",// 路径 
data : "clientTel="+clientTel+"&activityId="+activityId , 
success: function(text){$("#randomCode").val(text);}, 
error: function(text) {alert("对不起,用户ID不存在,请输入正确的用户ID");} 
}); 

아시온 클래스:

코드는 다음과 같습니다.

HttpServletResponse res = ServletActionContext.getResponse(); 
res.reset(); 
res.setContentType("text/html;charset=utf-8"); 
PrintWriter pw = res.getWriter(); 
pw.print(random); 
pw.flush(); 
pw.close(); 

pw.print(random); 여기서 임의는 액션이 ​​jsp에 전달하려는 값입니다. jsp에서 성공: function(text) 여기의 텍스트는 액션에서 전달된 값을 수신하는 것입니다.